html {
    /* 颜色定义 */
    --red-50: #ffebee;
    --red-100: #FFCDD2;
    --red-200: #ef9a9a;
    --red-300: #e57373;
    --red-400: #ef5350;
    --red-500: #f44336;
    --red-600: #e53935;
    --red-700: #d32f2f;
    --red-800: #c62828;
    --red-900: #b71c1c;
    --red-A100: #ff8a80;
    --red-A200: #ff5252;
    --red-A400: #ff1744;
    --red-A700: #d50000;
    --red: var(--red-500);
    --pink-50: #FCE4EC;
    --pink-100: #F8BBD0;
    --pink-200: #F48FB1;
    --pink-300: #F06292;
    --pink-400: #EC407A;
    --pink-500: #E91E63;
    --pink-600: #D81B60;
    --pink-700: #C2185B;
    --pink-800: #AD1457;
    --pink-900: #880E4F;
    --pink-A100: #FF80AB;
    --pink-A200: #FF4081;
    --pink-A400: #F50057;
    --pink-A700: #C51162;
    --pink: var(--pink-500);
    --purple-50: #F3E5F5;
    --purple-100: #E1BEE7;
    --purple-200: #CE93D8;
    --purple-300: #BA68C8;
    --purple-400: #AB47BC;
    --purple-500: #9C27B0;
    --purple-600: #8E24AA;
    --purple-700: #7B1FA2;
    --purple-800: #6A1B9A;
    --purple-900: #4A148C;
    --purple-A100: #EA80FC;
    --purple-A200: #E040FB;
    --purple-A400: #D500F9;
    --purple-A700: #AA00FF;
    --purple: var(--purple-500);
    --deeppurple-50: #EDE7F6;
    --deeppurple-100: #D1C4E9;
    --deeppurple-200: #B39DDB;
    --deeppurple-300: #9575CD;
    --deeppurple-400: #7E57C2;
    --deeppurple-500: #673AB7;
    --deeppurple-600: #5E35B1;
    --deeppurple-700: #512DA8;
    --deeppurple-800: #4527A0;
    --deeppurple-900: #311B92;
    --deeppurple-A100: #B388FF;
    --deeppurple-A200: #7C4DFF;
    --deeppurple-A400: #651FFF;
    --deeppurple-A700: #6200EA;
    --deeppurple: var(--deeppurple-500);
    --indigo-50: #E8EAF6;
    --indigo-100: #C5CAE9;
    --indigo-200: #9FA8DA;
    --indigo-300: #7986CB;
    --indigo-400: #5C6BC0;
    --indigo-500: #3F51B5;
    --indigo-600: #3949AB;
    --indigo-700: #303F9F;
    --indigo-800: #283593;
    --indigo-900: #1A237E;
    --indigo-A100: #8C9EFF;
    --indigo-A200: #536DFE;
    --indigo-A400: #3D5AFE;
    --indigo-A700: #304FFE;
    --indigo: var(--indigo-500);
    --blue-50: #E3F2FD;
    --blue-100: #BBDEFB;
    --blue-200: #90CAF9;
    --blue-300: #64B5F6;
    --blue-400: #42A5F5;
    --blue-500: #2196F3;
    --blue-600: #1E88E5;
    --blue-700: #1976D2;
    --blue-800: #1565C0;
    --blue-900: #0D47A1;
    --blue-A100: #82B1FF;
    --blue-A200: #448AFF;
    --blue-A400: #2979FF;
    --blue-A700: #2962FF;
    --blue: var(--blue-500);
    --lightblue-50: #E1F5FE;
    --lightblue-100: #B3E5FC;
    --lightblue-200: #81D4FA;
    --lightblue-300: #4FC3F7;
    --lightblue-400: #29B6F6;
    --lightblue-500: #03A9F4;
    --lightblue-600: #039BE5;
    --lightblue-700: #0288D1;
    --lightblue-800: #0277BD;
    --lightblue-900: #01579B;
    --lightblue-A100: #80D8FF;
    --lightblue-A200: #40C4FF;
    --lightblue-A400: #00B0FF;
    --lightblue-A700: #0091EA;
    --lightblue: var(--lightblue-500);
    --cyan-50: #E0F7FA;
    --cyan-100: #B2EBF2;
    --cyan-200: #80DEEA;
    --cyan-300: #4DD0E1;
    --cyan-400: #26C6DA;
    --cyan-500: #00BCD4;
    --cyan-600: #00ACC1;
    --cyan-700: #0097A7;
    --cyan-800: #00838F;
    --cyan-900: #006064;
    --cyan-A100: #84FFFF;
    --cyan-A200: #18FFFF;
    --cyan-A400: #00E5FF;
    --cyan-A700: #00B8D4;
    --cyan: var(--cyan-500);
    --teal-50: #E0F2F1;
    --teal-100: #B2DFDB;
    --teal-200: #80CBC4;
    --teal-300: #4DB6AC;
    --teal-400: #26A69A;
    --teal-500: #009688;
    --teal-600: #00897B;
    --teal-700: #00796B;
    --teal-800: #00695C;
    --teal-900: #004D40;
    --teal-A100: #A7FFEB;
    --teal-A200: #64FFDA;
    --teal-A400: #1DE9B6;
    --teal-A700: rgb(42, 124, 113);
    --teal: var(--teal-500);
    --green-50: #E8F5E9;
    --green-100: #C8E6C9;
    --green-200: #A5D6A7;
    --green-300: #81C784;
    --green-400: #66BB6A;
    --green-500: #4CAF50;
    --green-600: #43A047;
    --green-700: #388E3C;
    --green-800: #2E7D32;
    --green-900: #1B5E20;
    --green-A100: #B9F6CA;
    --green-A200: #69F0AE;
    --green-A400: #00E676;
    --green-A700: #00C853;
    --green: var(--green-500);
    --lightgreen-50: #F1F8E9;
    --lightgreen-100: #DCEDC8;
    --lightgreen-200: #C5E1A5;
    --lightgreen-300: #AED581;
    --lightgreen-400: #9CCC65;
    --lightgreen-500: #8BC34A;
    --lightgreen-600: #7CB342;
    --lightgreen-700: #689F38;
    --lightgreen-800: #558B2F;
    --lightgreen-900: #33691E;
    --lightgreen-A100: #CCFF90;
    --lightgreen-A200: #B2FF59;
    --lightgreen-A400: #76FF03;
    --lightgreen-A700: #64DD17;
    --lightgreen: var(--lightgreen-500);
    --lime-50: #F9FBE7;
    --lime-100: #F0F4C3;
    --lime-200: #E6EE9C;
    --lime-300: #DCE775;
    --lime-400: #D4E157;
    --lime-500: #CDDC39;
    --lime-600: #C0CA33;
    --lime-700: #AFB42B;
    --lime-800: #9E9D24;
    --lime-900: #827717;
    --lime-A100: #F4FF81;
    --lime-A200: #EEFF41;
    --lime-A400: #C6FF00;
    --lime-A700: #AEEA00;
    --lime: var(--lime-500);
    --yellow-50: #FFFDE7;
    --yellow-100: #FFF9C4;
    --yellow-200: #FFF59D;
    --yellow-300: #FFF176;
    --yellow-400: #FFEE58;
    --yellow-500: #FFEB3B;
    --yellow-600: #FDD835;
    --yellow-700: #FBC02D;
    --yellow-800: #F9A825;
    --yellow-900: #F57F17;
    --yellow-A100: #FFFF8D;
    --yellow-A200: #FFFF00;
    --yellow-A400: #FFEA00;
    --yellow-A700: #FFD600;
    --yellow: var(--yellow-500);
    --amber-50: #FFF8E1;
    --amber-100: #FFECB3;
    --amber-200: #FFE082;
    --amber-300: #FFD54F;
    --amber-400: #FFCA28;
    --amber-500: #FFC107;
    --amber-600: #FFB300;
    --amber-700: #FFA000;
    --amber-800: #FF8F00;
    --amber-900: #FF6F00;
    --amber-A100: #FFE57F;
    --amber-A200: #FFD740;
    --amber-A400: #FFC400;
    --amber-A700: #FFAB00;
    --amber: var(--amber-500);
    --orange-50: #FFF3E0;
    --orange-100: #FFE0B2;
    --orange-200: #FFCC80;
    --orange-300: #FFB74D;
    --orange-400: #FFA726;
    --orange-500: #FF9800;
    --orange-600: #FB8C00;
    --orange-700: #F57C00;
    --orange-800: #EF6C00;
    --orange-900: #E65100;
    --orange-A100: #FFD180;
    --orange-A200: #FFAB40;
    --orange-A400: #FF9100;
    --orange-A700: #FF6D00;
    --orange: var(--orange-500);
    --deeporange-50: #FBE9E7;
    --deeporange-100: #FFCCBC;
    --deeporange-200: #FFAB91;
    --deeporange-300: #FF8A65;
    --deeporange-400: #FF7043;
    --deeporange-500: #FF5722;
    --deeporange-600: #F4511E;
    --deeporange-700: #E64A19;
    --deeporange-800: #D84315;
    --deeporange-900: #BF360C;
    --deeporange-A100: #FF9E80;
    --deeporange-A200: #FF6E40;
    --deeporange-A400: #FF3D00;
    --deeporange-A700: #DD2C00;
    --deeporange: var(--deeporange-500);
    --brown-50: #EFEBE9;
    --brown-100: #D7CCC8;
    --brown-200: #BCAAA4;
    --brown-300: #A1887F;
    --brown-400: #8D6E63;
    --brown-500: #795548;
    --brown-600: #6D4C41;
    --brown-700: #5D4037;
    --brown-800: #4E342E;
    --brown-900: #3E2723;
    --brown: var(--brown-500);
    --grey-50: #FAFAFA;
    --grey-100: #F5F5F5;
    --grey-200: #EEEEEE;
    --grey-300: #E0E0E0;
    --grey-400: #BDBDBD;
    --grey-500: #9E9E9E;
    --grey-600: #757575;
    --grey-700: #616161;
    --grey-800: #424242;
    --grey-900: #212121;
    --grey: var(--grey-500);
    --bluegrey-50: #ECEFF1;
    --bluegrey-100: #CFD8DC;
    --bluegrey-200: #B0BEC5;
    --bluegrey-300: #90A4AE;
    --bluegrey-400: #78909C;
    --bluegrey-500: #607D8B;
    --bluegrey-600: #546E7A;
    --bluegrey-700: #455A64;
    --bluegrey-800: #37474F;
    --bluegrey-900: #263238;
    --bluegrey: var(--bluegrey-500);
    --black: #000000;
    --white: #ffffff;
    /* 对比度 */
    --light-primary-text-color: rgba(0, 0, 0, .87);
    --light-secondary-text-color: rgba(0, 0, 0, .54);
    --light-disabled-text-color: rgba(0, 0, 0, .38);
    --light-disabled-button-color: rgba(0, 0, 0, .12);
    --light-disabled-button-text-color: rgba(0, 0, 0, .26);
    --light-decoration-line-color: rgba(0, 0, 0, .12);
    --light-active-icon-color: var(--light-primary-text-color);
    --light-icon-color: var(--light-secondary-text-color);
    --light-disabled-icon-color: var(--light-disabled-text-color);
    --dark-primary-text-color: rgba(255, 255, 255, 1.0);
    --dark-secondary-text-color: rgba(255, 255, 255, .7);
    --dark-disabled-text-color: rgba(255, 255, 255, .5);
    --dark-disabled-button-color: rgba(255, 255, 255, .12);
    --dark-disabled-button-text-color: rgba(255, 255, 255, .30);
    --dark-decoration-line-color: rgba(255, 255, 255, .12);
    --dark-active-icon-color: var(--dark-primary-text-color);
    --dark-icon-color: var(--dark-secondary-text-color);
    --dark-disabled-icon-color: var(--dark-disabled-text-color);
    --dark-theme-statusbar-color: #000000;
    --dark-theme-toolbar-color: #212121;
    --dark-theme-background-color: #303030;
    --dark-theme-dialog-color: #424242;
    --light-theme-statusbar-color: #e0e0e0;
    --light-theme-toolbar-color: #f5f5f5;
    --light-theme-background-color: #fafafa;
    --light-theme-dialog-color: #ffffff;
    /* 字体相关 */
    --title-size: 20px;
    --button-size: 14px;
    --sub-heading-size: 16px;
    --body-size: 14px;
    --headline-size: 24px;
    --caption-size: 12px;
    --title-weight: normal;
    --button-weight: 500;
    --sub-heading-weight: normal;
    --body-weight: normal;
    --headline-weight: normal;
    --caption-weight: normal;
    --headline-height: 32px;
    --title-height: 28px;
    --body-height: 20px;
    --sub-heading-height: 24px;
    --caption-height: 16px;
    --body-color: rgba(0, 0, 0, 0.87);
    --caption-color: rgba(0, 0, 0, 0.54);
    /* 阴影颜色以及半色 */
    --shadow-red-half: rgba(244, 67, 54, 0.5);
    --shadow-red-1: rgba(244, 67, 54, 0.2);
    --shadow-red-2: rgba(244, 67, 54, 0.14);
    --shadow-red-3: rgba(244, 67, 54, 0.12);
    --shadow-pink-half: rgba(233, 30, 99, 0.5);
    --shadow-pink-1: rgba(233, 30, 99, 0.2);
    --shadow-pink-2: rgba(233, 30, 99, 0.14);
    --shadow-pink-3: rgba(233, 30, 99, 0.12);
    --shadow-purple-half: rgba(156, 39, 176, 0.5);
    --shadow-purple-1: rgba(156, 39, 176, 0.2);
    --shadow-purple-2: rgba(156, 39, 176, 0.14);
    --shadow-purple-3: rgba(156, 39, 176, 0.12);
    --shadow-deeppurple-half: rgba(103, 58, 183, 0.5);
    --shadow-deeppurple-1: rgba(103, 58, 183, 0.2);
    --shadow-deeppurple-2: rgba(103, 58, 183, 0.14);
    --shadow-deeppurple-3: rgba(103, 58, 183, 0.12);
    --shadow-indigo-half: rgba(63, 81, 181, 0.5);
    --shadow-indigo-1: rgba(63, 81, 181, 0.2);
    --shadow-indigo-2: rgba(63, 81, 181, 0.14);
    --shadow-indigo-3: rgba(63, 81, 181, 0.12);
    --shadow-blue-half: rgb(33, 150, 243, 0.5);
    --shadow-blue-1: rgb(33, 150, 243, 0.2);
    --shadow-blue-2: rgb(33, 150, 243, 0.14);
    --shadow-blue-3: rgb(33, 150, 243, 0.12);
    --shadow-lightblue-half: rgba(3, 169, 244, 0.5);
    --shadow-lightblue-1: rgba(3, 169, 244, 0.2);
    --shadow-lightblue-2: rgba(3, 169, 244, 0.14);
    --shadow-lightblue-3: rgba(3, 169, 244, 0.12);
    --shadow-cyan-half: rgba(0, 188, 212, 0.5);
    --shadow-cyan-1: rgba(0, 188, 212, 0.2);
    --shadow-cyan-2: rgba(0, 188, 212, 0.14);
    --shadow-cyan-3: rgba(0, 188, 212, 0.12);
    --shadow-teal-half: rgba(0, 150, 136, 0.5);
    --shadow-teal-1: rgba(0, 150, 136, 0.2);
    --shadow-teal-2: rgba(0, 150, 136, 0.14);
    --shadow-teal-3: rgba(0, 150, 136, 0.12);
    --shadow-green-half: rgba(76, 175, 80, 0.5);
    --shadow-green-1: rgba(76, 175, 80, 0.2);
    --shadow-green-2: rgba(76, 175, 80, 0.14);
    --shadow-green-3: rgba(76, 175, 80, 0.12);
    --shadow-lightgreen-half: rgba(138, 202, 171, 0.5);
    --shadow-lightgreen-1: rgba(138, 202, 171, 0.2);
    --shadow-lightgreen-2: rgba(138, 202, 171, 0.14);
    --shadow-lightgreen-3: rgba(138, 202, 171, 0.12);
    --shadow-lime-half: rgba(205, 220, 57, 0.5);
    --shadow-lime-1: rgba(205, 220, 57, 0.2);
    --shadow-lime-2: rgba(205, 220, 57, 0.14);
    --shadow-lime-3: rgba(205, 220, 57, 0.12);
    --shadow-yellow-half: rgba(255, 235, 59, 0.5);
    --shadow-yellow-1: rgba(255, 235, 59, 0.2);
    --shadow-yellow-2: rgba(255, 235, 59, 0.14);
    --shadow-yellow-3: rgba(255, 235, 59, 0.12);
    --shadow-amber-half: rgba(255, 193, 7, 0.5);
    --shadow-amber-1: rgba(255, 193, 7, 0.2);
    --shadow-amber-2: rgba(255, 193, 7, 0.14);
    --shadow-amber-3: rgba(255, 193, 7, 0.12);
    --shadow-orange-half: rgba(255, 152, 0, 0.5);
    --shadow-orange-1: rgba(255, 152, 0, 0.2);
    --shadow-orange-2: rgba(255, 152, 0, 0.14);
    --shadow-orange-3: rgba(255, 152, 0, 0.12);
    --shadow-deeporange-half: rgba(255, 87, 34, 0.5);
    --shadow-deeporange-1: rgba(255, 87, 34, 0.2);
    --shadow-deeporange-2: rgba(255, 87, 34, 0.14);
    --shadow-deeporange-3: rgba(255, 87, 34, 0.12);
    --shadow-brown-half: rgba(121, 85, 72, 0.5);
    --shadow-brown-1: rgba(121, 85, 72, 0.2);
    --shadow-brown-2: rgba(121, 85, 72, 0.14);
    --shadow-brown-3: rgba(121, 85, 72, 0.12);
    --shadow-grey-half: rgba(158, 158, 158, 0.5);
    --shadow-grey-1: rgba(158, 158, 158, 0.2);
    --shadow-grey-2: rgba(158, 158, 158, 0.14);
    --shadow-grey-3: rgba(158, 158, 158, 0.12);
    --shadow-bluegrey-half: rgba(96, 125, 139, 0.5);
    --shadow-bluegrey-1: rgba(96, 125, 139, 0.2);
    --shadow-bluegrey-2: rgba(96, 125, 139, 0.14);
    --shadow-bluegrey-3: rgba(96, 125, 139, 0.12);
    --shadow-bluegrey-half: rgba(96, 125, 139, 0.5);
    --shadow-black-1: rgba(0, 0, 0, 0.2);
    --shadow-black-2: rgba(0, 0, 0, 0.14);
    --shadow-black-3: rgba(0, 0, 0, 0.12);
    --shadow-white-half: rgba(255, 255, 255, 0.5);
    --shadow-white-1: rgba(255, 255, 255, 0.2);
    --shadow-white-2: rgba(255, 255, 255, 0.14);
    --shadow-white-3: rgba(255, 255, 255, 0.12);
    --hb-color-1: var(--shadow-black-1);
    --hb-color-2: var(--shadow-black-2);
    --hb-color-3: var(--shadow-black-3);
    /* 动画相关 */
    --animation-long-time: 375ms;
    --animation-standard-time: 300ms;
    --animation-enter-time: 225ms;
    --animation-leave-time: 195ms;
    --animation-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --animation-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1.0);
    --animation-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
    --animation-shape: cubic-bezier(0.4, 0.0, 0.6, 1);
    --animation-linear: linear;
    /* 网格相关 */
    --gap-width: 16px;
    --statusHeight: 0px;
    --toolHeight: 0px;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    
}

html {
    font-size: 16px;
    font-family: Roboto, Noto, sans-serif, Arial, Helvetica;
}

body {
    --theme-background-color: var(--light-theme-background-color);
    --theme-reverse-background-color: var(--dark-theme-background-color);
    --theme-statusbar-color: var(--light-theme-statusbar-color);
    --theme-toolbar-color: var(--light-theme-toolbar-color);
    --theme-dialog-color: var(--light-theme-dialog-color);
    --theme-primary-text-color: var(--light-primary-text-color);
    --theme-primary-reverse-text-color: var(--dark-primary-text-color);
    --theme-secondary-text-color: var(--light-secondary-text-color);
    --theme-decoration-color: var(--light-decoration-line-color);
    --theme-active-icon-color: var(--light-active-icon-color);
    --theme-icon-color: var(--light-icon-color);
    --theme-disabled-icon-color: var(--light-disabled-icon-color);
    --theme-disabled-text-color: var(--light-disabled-text-color);
    --theme-disabled-button-color: var(--light-disabled-button-color);
    --theme-disabled-button-text-color: var(--light-disabled-button-text-color);
    --theme-disabled-button-text-rgb-color: #bdbdbd;
    --theme-color: var(--purple);
    --theme-shadow-color-1: var(--shadow-purple-1);
    --theme-shadow-color-2: var(--shadow-purple-2);
    --theme-shadow-color-3: var(--shadow-purple-3);
    --theme-half-color: var(--shadow-purple-half);
    --theme-text-color: var(--dark-primary-text-color);
    --accent-color: var(--lightblue-A400);
    --accent-shadow-color-1: var(--shadow-lightblue-1);
    --accent-shadow-color-2: var(--shadow-lightblue-2);
    --accent-shadow-color-3: var(--shadow-lightblue-3);
    --accent-half-color: var(--shadow-lightblue-half);
    --accent-text-color: var(--dark-primary-text-color);
    --error-color: var(--red-A700);
    --error-shadow-color-1: var(--shadow-red-1);
    --error-shadow-color-2: var(--shadow-red-2);
    --error-shadow-color-3: var(--shadow-red-3);
    --error-half-color: var(--shadow-red-half);
    --error-text-color: var(--dark-primary-text-color);
    --warning-color: var(--orange-A400);
    --warning-shadow-color-1: var(--shadow-orange-1);
    --warning-shadow-color-2: var(--shadow-orange-2);
    --warning-shadow-color-3: var(--shadow-orange-3);
    --warning-half-color: var(--shadow-orange-half);
    --warning-text-color: var(--dark-primary-text-color);
    --light-shadow-color1: var(--shadow-black-1);
    --light-shadow-color2: var(--shadow-black-2);
    --light-shadow-color3: var(--shadow-black-3);
    --theme-switch-slider-color: var(--grey-50);
    --theme-disabled-switch-slider-color: var(--grey-400);
    font-size: var(--body-size);
    line-height: var(--body-height);
    font-weight: var(--body-weight);
    color: var(--theme-primary-text-color);
    background: var(--theme-background-color);
    margin: 0;
}

body.theme-dark {
    --theme-primary-text-color: var(--dark-primary-text-color);
    --theme-primary-reverse-text-color: var(--light-primary-text-color);
    --theme-secondary-text-color: var(--dark-secondary-text-color);
    --theme-disabled-text-color: var(--dark-disabled-text-color);
    --theme-disabled-button-color: var(--dark-disabled-button-color);
    --theme-disabled-button-text-color: var(--dark-disabled-button-text-color);
    --theme-decoration-color: var(--dark-decoration-line-color);
    --theme-active-icon-color: var(--dark-active-icon-color);
    --theme-icon-color: var(--dark-icon-color);
    --theme-disabled-icon-color: var(--dark-disabled-text-color);
    --theme-background-color: var(--dark-theme-background-color);
    --theme-reverse-background-color: var(--light-theme-background-color);
    --theme-statusbar-color: var(--dark-theme-statusbar-color);
    --theme-toolbar-color: var(--dark-theme-toolbar-color);
    --theme-dialog-color: var(--dark-theme-dialog-color);
    --light-shadow-color1: var(--shadow-white-1);
    --light-shadow-color2: var(--shadow-white-2);
    --light-shadow-color3: var(--shadow-white-3);
    --theme-disabled-button-text-rgb-color: #4c4c4c;
    --theme-switch-slider-color: var(--grey-400);
    --theme-disabled-switch-slider-color: var(--grey-800);
}

body.red {
    --theme-color: var(--red);
    --theme-shadow-color-1: var(--shadow-red-1);
    --theme-shadow-color-2: var(--shadow-red-2);
    --theme-shadow-color-3: var(--shadow-red-3);
    --theme-half-color: var(--shadow-red-half);
}

body.pink {
    --theme-color: var(--pink);
    --theme-shadow-color-1: var(--shadow-pink-1);
    --theme-shadow-color-2: var(--shadow-pink-2);
    --theme-shadow-color-3: var(--shadow-pink-3);
    --theme-half-color: var(--shadow-pink-half);
}

body.purple {
    --theme-color: var(--purple);
    --theme-shadow-color-1: var(--shadow-purple-1);
    --theme-shadow-color-2: var(--shadow-purple-2);
    --theme-shadow-color-3: var(--shadow-purple-3);
    --theme-half-color: var(--shadow-purple-half);
}

body.deeppurple {
    --theme-color: var(--deeppurple);
    --theme-shadow-color-1: var(--shadow-deeppurple-1);
    --theme-shadow-color-2: var(--shadow-deeppurple-2);
    --theme-shadow-color-3: var(--shadow-deeppurple-3);
    --theme-half-color: var(--shadow-deeppurple-half);
}

body.indigo {
    --theme-color: var(--indigo);
    --theme-shadow-color-1: var(--shadow-indigo-1);
    --theme-shadow-color-2: var(--shadow-indigo-2);
    --theme-shadow-color-3: var(--shadow-indigo-3);
    --theme-half-color: var(--shadow-indigo-half);
}

body.blue {
    --theme-color: var(--blue);
    --theme-shadow-color-1: var(--shadow-blue-1);
    --theme-shadow-color-2: var(--shadow-blue-2);
    --theme-shadow-color-3: var(--shadow-blue-3);
    --theme-half-color: var(--shadow-blue-half);
}

body.lightblue {
    --theme-color: var(--lightblue);
    --theme-shadow-color-1: var(--shadow-lightblue-1);
    --theme-shadow-color-2: var(--shadow-lightblue-2);
    --theme-shadow-color-3: var(--shadow-lightblue-3);
    --theme-half-color: var(--shadow-lightblue-half);
}

body.cyan {
    --theme-color: var(--cyan);
    --theme-shadow-color-1: var(--shadow-cyan-1);
    --theme-shadow-color-2: var(--shadow-cyan-2);
    --theme-shadow-color-3: var(--shadow-cyan-3);
    --theme-half-color: var(--shadow-cyan-half);
}

body.teal {
    --theme-color: var(--teal);
    --theme-shadow-color-1: var(--shadow-teal-1);
    --theme-shadow-color-2: var(--shadow-teal-2);
    --theme-shadow-color-3: var(--shadow-teal-3);
    --theme-half-color: var(--shadow-teal-half);
}

body.green {
    --theme-color: var(--green);
    --theme-shadow-color-1: var(--shadow-green-1);
    --theme-shadow-color-2: var(--shadow-green-2);
    --theme-shadow-color-3: var(--shadow-green-3);
    --theme-half-color: var(--shadow-green-half);
}

body.lightgreen {
    --theme-color: var(--lightgreen);
    --theme-shadow-color-1: var(--shadow-lightgreen-1);
    --theme-shadow-color-2: var(--shadow-lightgreen-2);
    --theme-shadow-color-3: var(--shadow-lightgreen-3);
    --theme-half-color: var(--shadow-lightgreen-half);
}

body.lime {
    --theme-color: var(--lime);
    --theme-shadow-color-1: var(--shadow-lime-1);
    --theme-shadow-color-2: var(--shadow-lime-2);
    --theme-shadow-color-3: var(--shadow-lime-3);
    --theme-half-color: var(--shadow-lime-half);
}

body.yellow {
    --theme-color: var(--yellow);
    --theme-shadow-color-1: var(--shadow-yellow-1);
    --theme-shadow-color-2: var(--shadow-yellow-2);
    --theme-shadow-color-3: var(--shadow-yellow-3);
    --theme-half-color: var(--shadow-yellow-half);
}

body.amber {
    --theme-color: var(--amber);
    --theme-shadow-color-1: var(--shadow-amber-1);
    --theme-shadow-color-2: var(--shadow-amber-2);
    --theme-shadow-color-3: var(--shadow-amber-3);
    --theme-half-color: var(--shadow-amber-half);
}

body.orange {
    --theme-color: var(--orange);
    --theme-shadow-color-1: var(--shadow-orange-1);
    --theme-shadow-color-2: var(--shadow-orange-2);
    --theme-shadow-color-3: var(--shadow-orange-3);
    --theme-half-color: var(--shadow-orange-half);
}

body.deeporange {
    --theme-color: var(--deeporange);
    --theme-shadow-color-1: var(--shadow-deeporange-1);
    --theme-shadow-color-2: var(--shadow-deeporange-2);
    --theme-shadow-color-3: var(--shadow-deeporange-3);
    --theme-half-color: var(--shadow-deeporange-half);
}

body.brown {
    --theme-color: var(--brown);
    --theme-shadow-color-1: var(--shadow-brown-1);
    --theme-shadow-color-2: var(--shadow-brown-2);
    --theme-shadow-color-3: var(--shadow-brown-3);
    --theme-half-color: var(--shadow-brown-half);
}

body.grey {
    --theme-color: var(--grey);
    --theme-shadow-color-1: var(--shadow-grey-1);
    --theme-shadow-color-2: var(--shadow-grey-2);
    --theme-shadow-color-3: var(--shadow-grey-3);
    --theme-half-color: var(--shadow-grey-half);
}

body.bluegrey {
    --theme-color: var(--bluegrey);
    --theme-shadow-color-1: var(--shadow-bluegrey-1);
    --theme-shadow-color-2: var(--shadow-bluegrey-2);
    --theme-shadow-color-3: var(--shadow-bluegrey-3);
    --theme-half-color: var(--shadow-bluegrey-half);
}

html,
.shadow, [role="btn"], [role="floatbtn"] {
    /* 阴影相关 */
    --hb-0-shadow: 0 0px 0px 0px var(--hb-color-1), 0 0px 0px 0 var(--hb-color-2), 0 0px 0px 0 var(--hb-color-3);
    --hb-1-shadow: 0 2px 1px -1px var(--hb-color-1), 0 1px 1px 0 var(--hb-color-2), 0 1px 3px 0 var(--hb-color-3);
    --hb-2-shadow: 0 3px 1px -2px var(--hb-color-1), 0 2px 2px 0 var(--hb-color-2), 0 1px 5px 0 var(--hb-color-3);
    --hb-3-shadow: 0 3px 3px -2px var(--hb-color-1), 0 3px 4px 0 var(--hb-color-2), 0 1px 8px 0 var(--hb-color-3);
    --hb-4-shadow: 0 2px 4px -1px var(--hb-color-1), 0 4px 5px 0 var(--hb-color-2), 0 1px 10px 0 var(--hb-color-3);
    --hb-5-shadow: 0 3px 5px -1px var(--hb-color-1), 0 5px 8px 0 var(--hb-color-2), 0 1px 14px 0 var(--hb-color-3);
    --hb-6-shadow: 0 3px 5px -1px var(--hb-color-1), 0 6px 10px 0 var(--hb-color-2), 0 1px 18px 0 var(--hb-color-3);
    --hb-7-shadow: 0 4px 5px -2px var(--hb-color-1), 0 7px 10px 1px var(--hb-color-2), 0 2px 16px 1px var(--hb-color-3);
    --hb-8-shadow: 0 5px 5px -3px var(--hb-color-1), 0 8px 10px 1px var(--hb-color-2), 0 3px 14px 2px var(--hb-color-3);
    --hb-9-shadow: 0 5px 6px -3px var(--hb-color-1), 0 9px 12px 1px var(--hb-color-2), 0 3px 16px 2px var(--hb-color-3);
    --hb-10-shadow: 0 6px 6px -3px var(--hb-color-1), 0 10px 14px 1px var(--hb-color-2), 0 4px 18px 3px var(--hb-color-3);
    --hb-11-shadow: 0 6px 7px -4px var(--hb-color-1), 0 11px 15px 1px var(--hb-color-2), 0 4px 20px 3px var(--hb-color-3);
    --hb-12-shadow: 0 7px 8px -4px var(--hb-color-1), 0 12px 17px 2px var(--hb-color-2), 0 5px 22px 4px var(--hb-color-3);
    --hb-13-shadow: 0 7px 8px -4px var(--hb-color-1), 0 13px 19px 2px var(--hb-color-2), 0 5px 24px 4px var(--hb-color-3);
    --hb-14-shadow: 0 7px 9px -4px var(--hb-color-1), 0 14px 21px 2px var(--hb-color-2), 0 5px 26px 4px var(--hb-color-3);
    --hb-15-shadow: 0 8px 9px -5px var(--hb-color-1), 0 15px 22px 2px var(--hb-color-2), 0 6px 28px 5px var(--hb-color-3);
    --hb-16-shadow: 0 8px 10px -5px var(--hb-color-1), 0 16px 24px 2px var(--hb-color-2), 0 6px 30px 5px var(--hb-color-3);
    --hb-17-shadow: 0 8px 11px -5px var(--hb-color-1), 0 17px 26px 2px var(--hb-color-2), 0 6px 32px 5px var(--hb-color-3);
    --hb-18-shadow: 0 9px 11px -5px var(--hb-color-1), 0 18px 28px 2px var(--hb-color-2), 0 7px 34px 6px var(--hb-color-3);
    --hb-19-shadow: 0 9px 12px -6px var(--hb-color-1), 0 19px 29px 2px var(--hb-color-2), 0 7px 36px 6px var(--hb-color-3);
    --hb-20-shadow: 0 10px 13px -6px var(--hb-color-1), 0 20px 31px 3px var(--hb-color-2), 0 8px 38px 7px var(--hb-color-3);
    --hb-21-shadow: 0 10px 13px -6px var(--hb-color-1), 0 21px 33px 3px var(--hb-color-2), 0 8px 40px 7px var(--hb-color-3);
    --hb-22-shadow: 0 10px 14px -6px var(--hb-color-1), 0 22px 35px 3px var(--hb-color-2), 0 8px 42px 7px var(--hb-color-3);
    --hb-23-shadow: 0 11px 14px -7px var(--hb-color-1), 0 23px 36px 3px var(--hb-color-2), 0 9px 44px 8px var(--hb-color-3);
    --hb-24-shadow: 0 11px 15px -7px var(--hb-color-1), 0 24px 38px 3px var(--hb-color-2), 0 9px 46px 8px var(--hb-color-3);
}

.shadow_red {
    --hb-color-1: var(--shadow-red-1);
    --hb-color-2: var(--shadow-red-2);
    --hb-color-3: var(--shadow-red-3);
}

.shadow_pink {
    --hb-color-1: var(--shadow-pink-1);
    --hb-color-2: var(--shadow-pink-2);
    --hb-color-3: var(--shadow-pink-3);
}

.shadow_purple {
    --hb-color-1: var(--shadow-purple-1);
    --hb-color-2: var(--shadow-purple-2);
    --hb-color-3: var(--shadow-purple-3);
}

.shadow_deeppurple {
    --hb-color-1: var(--shadow-deeppurple-1);
    --hb-color-2: var(--shadow-deeppurple-2);
    --hb-color-3: var(--shadow-deeppurple-3);
}

.shadow_indigo {
    --hb-color-1: var(--shadow-indigo-1);
    --hb-color-2: var(--shadow-indigo-2);
    --hb-color-3: var(--shadow-indigo-3);
}

.shadow_blue {
    --hb-color-1: var(--shadow-blue-1);
    --hb-color-2: var(--shadow-blue-2);
    --hb-color-3: var(--shadow-blue-3);
}

.shadow_lightblue {
    --hb-color-1: var(--shadow-lightblue-1);
    --hb-color-2: var(--shadow-lightblue-2);
    --hb-color-3: var(--shadow-lightblue-3);
}

.shadow_cyan {
    --hb-color-1: var(--shadow-cyan-1);
    --hb-color-2: var(--shadow-cyan-2);
    --hb-color-3: var(--shadow-cyan-3);
}

.shadow_teal {
    --hb-color-1: var(--shadow-teal-1);
    --hb-color-2: var(--shadow-teal-2);
    --hb-color-3: var(--shadow-teal-3);
}

.shadow_green {
    --hb-color-1: var(--shadow-green-1);
    --hb-color-2: var(--shadow-green-2);
    --hb-color-3: var(--shadow-green-3);
}

.shadow_lime {
    --hb-color-1: var(--shadow-lime-1);
    --hb-color-2: var(--shadow-lime-2);
    --hb-color-3: var(--shadow-lime-3);
}

.shadow_yellow {
    --hb-color-1: var(--shadow-yellow-1);
    --hb-color-2: var(--shadow-yellow-2);
    --hb-color-3: var(--shadow-yellow-3);
}

.shadow_amber {
    --hb-color-1: var(--shadow-amber-1);
    --hb-color-2: var(--shadow-amber-2);
    --hb-color-3: var(--shadow-amber-3);
}

.shadow_orange {
    --hb-color-1: var(--shadow-orange-1);
    --hb-color-2: var(--shadow-orange-2);
    --hb-color-3: var(--shadow-orange-3);
}

.shadow_deeporange {
    --hb-color-1: var(--shadow-deeporange-1);
    --hb-color-2: var(--shadow-deeporange-2);
    --hb-color-3: var(--shadow-deeporange-3);
}

.shadow_brown {
    --hb-color-1: var(--shadow-brown-1);
    --hb-color-2: var(--shadow-brown-2);
    --hb-color-3: var(--shadow-brown-3);
}

.shadow_grey {
    --hb-color-1: var(--shadow-grey-1);
    --hb-color-2: var(--shadow-grey-2);
    --hb-color-3: var(--shadow-grey-3);
}

.shadow_bluegrey {
    --hb-color-1: var(--shadow-bluegrey-1);
    --hb-color-2: var(--shadow-bluegrey-2);
    --hb-color-3: var(--shadow-bluegrey-3);
}

.shadow_black {
    --hb-color-1: var(--shadow-black-1);
    --hb-color-2: var(--shadow-black-2);
    --hb-color-3: var(--shadow-black-3);
}

.shadow_white {
    --hb-color-1: var(--shadow-white-1);
    --hb-color-2: var(--shadow-white-2);
    --hb-color-3: var(--shadow-white-3);
}

.ripple {
    position: relative;
    overflow: hidden;
    user-select: none;
}

.ripple-in {
    position: absolute;
    background-color: currentColor;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.ripple-end {
    animation: trippleEnd var(--animation-long-time) var(--animation-decelerate) forwards;
}

@keyframes trippleEnd {
    0% {
        opacity: 0.0;
        transform: var(--startanimation);
    }

    100% {
        opacity: 0.1;
        transform: var(--animationend);
    }
}

.ripple-out {
    animation: trippleEnd 150ms var(--animation-decelerate) forwards;
}

.ripple-remove {
    opacity: 0;
    animation: forwards opacityLeave 150ms var(--animation-decelerate);
}

@keyframes opacityLeave {
    to {
        opacity: 0;
    }
}

.container {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    --xs-1-width: calc((100% - 5 * var(--gap-width)) / 4);
    --xs-2-width: calc((100% - 5 * var(--gap-width)) / 2 + var(--gap-width));
    --xs-3-width: calc((100% - 5 * var(--gap-width)) * 3 / 4 + var(--gap-width) * 2);
    --xs-4-width: calc(100% - 2 * var(--gap-width));
    --xs-1-left: calc(var(--xs-1-width) + 2 * var(--gap-width));
    --xs-2-left: calc(var(--xs-2-width) + 2 * var(--gap-width));
    --xs-3-left: calc(var(--xs-3-width) + 2 * var(--gap-width));
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
    width: var(--xs-4-width);
    margin-left: var(--gap-width);
    box-sizing: border-box;
}

.col-xs-1 {
    width: var(--xs-1-width);
}

.col-xs-2 {
    width: var(--xs-2-width);
}

.col-xs-3 {
    width: var(--xs-3-width);
}

.col-xs-4 {
    width: var(--xs-4-width);
}

.col-xs-span-1 {
    margin-left: var(--xs-1-left);
}

.col-xs-span-2 {
    margin-left: var(--xs-2-left);
}

.col-xs-span-3 {
    margin-left: var(--xs-3-left);
}

img {
    max-width: 100%;
}

[role="icon"] {
    display: inline-block;
    vertical-align: middle;
    color: var(--theme-icon-color);
}

[role="icon"]:focus {
    color: var(--theme-active-icon-color);
}

[role="icon"]:active {
    color: var(--theme-active-icon-color);
}

i[disabled="disabled"],
i[disabled="disabled"]:active {
    color: var(--theme-disabled-icon-color);
}

[role="icon"]-loading {
    transform-origin: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    animation: rotated 2s infinite linear;
}

[role="icon"] path,
[role="icon"] svg,
[role="icon"] {
    outline: none;
}

@keyframes rotated {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

[role="uploader"][type="btn"]>input[type="file"]+div>label,
[role="btn"],
[role="floatbtn"] {
    box-shadow: var(--hb-2-shadow);
    height: 36px;
    min-width: 64px;
    box-sizing: border-box;
    user-select: none;
    background: white;
    border: none;
    outline: 0;
    padding: 0 1rem;
    font-size: var(--button-size);
    font-weight: var(--button-weight);
    border-radius: 4px;
    will-change: box-shadow;
    transition: all .28s ease;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--theme-color);
    color: var(--theme-text-color);
    --btn-link-outline-color: var(--theme-color);
    --hb-color-1: var(--theme-shadow-color-1);
    --hb-color-2: var(--theme-shadow-color-2);
    --hb-color-3: var(--theme-shadow-color-3);
}

[role="uploader"][type="btn"]>input[type="file"]:disabled+div>label,
[role="btn"]:disabled,
[role="floatbtn"]:disabled {
    background: var(--theme-disabled-button-color) !important;
    box-shadow: none !important;
    color: var(--theme-disabled-button-text-color) !important;
    cursor: not-allowed;
}

[role="uploader"][type="btn"]>input[type="file"]:disabled+div>label>[role="icon"]>svg,
[role="btn"]:disabled>[role="icon"]>svg,
[role="floatbtn"]:disabled>[role="icon"]>svg {
    color: var(--theme-disabled-button-text-color) !important;
}

.str-btn-accent {
    background: var(--accent-color);
    color: var(--accent-text-color);
    --btn-link-outline-color: var(--accent-color);
    --hb-color-1: var(--accent-shadow-color-1);
    --hb-color-2: var(--accent-shadow-color-2);
    --hb-color-3: var(--accent-shadow-color-3);
}

.str-btn-error {
    background: var(--error-color);
    color: var(--error-text-color);
    --btn-link-outline-color: var(--error-color);
    --hb-color-1: var(--error-shadow-color-1);
    --hb-color-2: var(--error-shadow-color-2);
    --hb-color-3: var(--error-shadow-color-3);
}

[role="uploader"][type="btn"]>input[type="file"]+div>label:hover,
[role="uploader"][type="btn"]>input[type="file"]:focus+div>label,
[role="btn"]:hover,
[role="btn"]:focus,
[role="floatbtn"]:hover,
[role="floatbtn"]:focus {
    box-shadow: var(--hb-4-shadow);
}

[role="uploader"][type="btn"]>input[type="file"]+div>label:active,
[role="btn"]:active,
[role="floatbtn"]:active {
    box-shadow: var(--hb-8-shadow);
}

[role="uploader"][type="btn"] label>[role="icon"],
[role="btn"]>i,
[role="floatbtn"]>i {
    margin-right: .5rem;
    margin-left: -.25rem;
    height: 18px;
}

[role="uploader"][type="btn"].str-uploader-theme label>[role="icon"],
[role="uploader"][type="btn"].str-uploader-accent label>[role="icon"],
[role="btn"]>[role="icon"],
[role="floatbtn"]>[role="icon"] {
    color: var(--theme-text-color);
}

[role="btn"][rendertype="outline"],
[role="btn"][rendertype="link"] {
    background: transparent;
    box-shadow: none !important;
    color: var(--btn-link-outline-color);
}

[role="btn"][rendertype="link"]:hover,
[role="btn"][rendertype="outline"]:hover,
[role="btn"][rendertype="link"]:focus,
[role="btn"][rendertype="outline"]:focus {
    background: var(--hb-color-3);
}

[role="btn"][rendertype="link"]:disabled {
    color: var(--theme-disabled-button-text-color);
    background: transparent !important;
}

[role="btn"][rendertype="outline"] {
    border: 1px solid currentColor;
}

[role="btn"][rendertype="outline"]>[role="icon"],
[role="btn"][rendertype="link"]>[role="icon"] {
    color: currentColor
}

[role="floatbtn"] {
    width: 56px;
    height: 56px;
    padding: 0;
    min-width: auto;
    border-radius: 28px;
    box-shadow: var(--hb-2-shadow);
}

[role="floatbtn"]>span {
    text-indent: -999em;
    width: 0;
}

[role="floatbtn"]>i {
    margin-right: 0;
    margin-left: 0;
    font-size: 1.5em;
    height: 24px;
}

[role="floatbtn"][type="extended"]>i {
    margin-right: .5em;
    margin-left: -.25em;
}

[role="floatbtn"][size="small"] {
    width: 40px;
    height: 40px;
}

[role="floatbtn"][type="extended"] {
    width: auto;
    padding: 0 1.2em;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    height: 48px;
}

[role="floatbtn"][type="extended"]>span {
    text-indent: 0;
    width: auto;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 36px;
}

[role="formitemcontainer"] {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    min-width: 280px;
}

[role="formitem"] {
    --theme-btn-color: var(--theme-color);
    height: 56px;
    width: 100%;
    border-radius: 4px 4px 0 0;
    display: inline-flex;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    will-change: opacity, transform, color, background-color;
    transition: background-color 150ms var(--animation-standard);
}

.str-text-accent {
    --theme-btn-color: var(--accent-color);
}

[assistivetype = "error"] {
    --theme-btn-color: var(--error-color);
}

.str-text-theme {
    --theme-btn-color: var(--theme-color);
}

[role="formitem"][rendertype="outline"] {
    overflow: visible;
}

[rendertype="filled"] {
    background: var(--theme-toolbar-color);
}

[role="formitem"]>input,
[role="formitem"]>select,
[role="formitem"]>textarea {
    align-self: flex-end;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 20px 16px 6px;
    transition: border 150ms var(--animation-standard);
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    font-size: 1rem;
    color: var(--theme-primary-text-color);
}

[role="formitem"]>textarea {
    line-height: 18px;
    padding-top: 28px;
}

[rendertype="outline"]>input,
[rendertype="outline"]>select,
[rendertype="outline"]>textarea {
    background: transparent;
    padding: 14px 16px 12px;
}

[rendertype="outline"]>textarea {
    padding-top: 18px;
    padding-bottom: 16px;
}
[rendertype="outline"][size= "small"]>textarea {
    padding-top: 10px;
    padding-bottom: 10px;
}

[rendertype="filled"]>input,
[rendertype="filled"]>select,
[rendertype="filled"]>textarea {
    border: none;
    border-bottom: 1px solid var(--theme-secondary-text-color);
    border-radius: 0;
}

[rendertype="filled"]>input:hover,
[rendertype="filled"]>select:hover,
[rendertype="filled"]>textarea:hover {
    border-bottom-color: var(--theme-primary-text-color);
    border-bottom-width: 2px;
}

[rendertype="filled"].str-text-edit>input:hover,
[rendertype="filled"].str-text-edit>select:hover,
[rendertype="filled"].str-text-edit>textarea:hover {
    border-bottom-width: 1px;
}

[rendertype="outline"]>input,
[rendertype="outline"]>select,
[rendertype="outline"]>textarea {
    border: 1px solid var(--theme-secondary-text-color);
    border-radius: 4px;
}

[rendertype="outline"]>input:hover,
[rendertype="outline"]>select:hover,
[rendertype="outline"]>textarea:hover {
    border-color: var(--theme-primary-text-color);
}

[leadicon]>input,
[leadicon]>select {
    padding-left: 48px;
}

[trailicon]>input,
[trailicon]>select {
    padding-right: 48px;
}

[role="formitem"]>.ripple-line {
    position: absolute;
    width: 100%;
}

[rendertype="filled"]>.ripple-line {
    bottom: 0;
    height: 2px;
    background: var(--theme-btn-color);
    transform-origin: center;
    transform: scale(0, 1);
    transition: transform 75ms var(--animation-standard);
}

[rendertype="outline"]>.ripple-line {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    border: 0px solid transparent;
    pointer-events: none;
    transition: border 150ms var(--animation-standard);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 4px;
}

[rendertype="outline"].str-text-color>.ripple-line {
    border: 2px solid var(--theme-btn-color);
}

[rendertype="outline"][assistivetype = "error"]>.ripple-line {
    border: 2px solid var(--error-color);
}

[assistivetype = "error"][rendertype="filled"]>.ripple-line {
    background: var(--error-color);
}

[rendertype="filled"].str-text-color>input~.ripple-line,
[rendertype="filled"].str-text-color>select~.ripple-line,
[rendertype="filled"].str-text-color>textarea~.ripple-line {
    transition-duration: 150ms;
    transform: scale(1, 1);
}

[role="formitem"]>label,
[role="formitem"]>i.leadicon,
[role="formitem"]>i.trailicon {
    position: absolute;
    top: 28px;
    transform: translateY(-50%);
    color: var(--theme-secondary-text-color);
}

[role="formitem"][size= "small"]>label,
[role="formitem"][size= "small"]>i.leadicon,
[role="formitem"][size= "small"]>i.trailicon {
    top: 20px;
    height: 24px;
}

.str-text-field>i.leadicon,
.str-text-field>i.trailicon {
    height: 24px;
}

[role="formitem"].str-text-field-disabled>i.leadicon,
[role="formitem"].str-text-field-disabled>i.trailicon,
[role="formitem"].str-text-field-readonly>i.leadicon,
.str-text-field.str-text-field-readonly>i.trailicon {
    color: var(--theme-disabled-text-color);
}

[role="formitem"]>label {
    transform-origin: top left;
    transition-property: margin, padding, transform;
    transition-duration: 150ms;
    transition-timing-function: var(--animation-standard);
    z-index: 1;
}

[rendertype="filled"].str-text-edit>label {
    transform: translateY(calc(-50% - .75em)) scale(.75);
}

[rendertype="outline"].str-text-edit>label {
    background: var(--theme-background-color);
    transform: translateY(-36px) scale(.75, .75);
    padding: 0 .5em;
    margin-left: -.25em;
}

[rendertype="outline"].str-text-edit[leadicon]>label {
    transform: translate(-32px, -36px) scale(.75, .75);
}

[role="formitem"].str-text-color>label {
    color: var(--theme-btn-color);
}

[role="formitem"][assistivetype = "error"]>label {
    color: var(--error-color);
}

[assistivetype = "error"]>label::after {
    content: "*";
}

[rendertype="filled"][assistivetype = "error"]>input,
[rendertype="filled"][assistivetype = "error"]>select,
[rendertype="filled"][assistivetype = "error"]>textarea {
    border-bottom-color: var(--error-color);
}

[rendertype="outline"][assistivetype = "error"]>input,
[rendertype="outline"][assistivetype = "error"]>select,
[rendertype="outline"][assistivetype = "error"]>textarea {
    border-color: var(--error-color);
}

[assistivetype = "error"]>i.trailicon,
.addtion-error {
    color: var(--error-color) !important;
}

[role="formitem"]>i.leadicon {
    left: 16px;
}

[role="formitem"]>i.trailicon {
    right: 16px;
}

[role="formitem"]>label {
    left: 16px;
}

[role="formitem"][leadicon]>label {
    left: 48px;
}

.str-uploader-help-container,
[role="help"] {
    padding: 0 16px;
    font-size: 12px;
    line-height: 2;
    color: var(--theme-secondary-text-color);
    height: 2em;
    display: flex;
    justify-content: space-between;
}

[role="help"]>.addtion-error {
    margin-right: auto;
}

[role="help"]>.text-counter {
    margin-left: auto;
}

.str-text-field-disabled>label,
.str-text-field-readonly>label {
    color: var(--theme-disabled-text-color);
}

[rendertype="filled"].str-text-field-disabled>input,
[rendertype="filled"].str-text-field-disabled>select,
[rendertype="filled"].str-text-field-disabled>textarea {
    border-bottom: 1px dashed var(--theme-disabled-text-color) !important;
}

[rendertype="filled"].str-text-field-readonly>input,
[rendertype="filled"].str-text-field-readonly>select,
[rendertype="filled"].str-text-field-readonly>textarea {
    border-bottom: 1px solid var(--theme-disabled-text-color) !important;
}

[rendertype="outline"].str-text-field-disabled>input,
[rendertype="outline"].str-text-field-disabled>select,
[rendertype="outline"].str-text-field-disabled>textarea,
[rendertype="outline"].str-text-field-readonly>input,
[rendertype="outline"].str-text-field-readonly>select,
[rendertype="outline"].str-text-field-readonly>textarea {
    border-color: var(--theme-disabled-text-color) !important;
}

.str-text-field-disabled+[role="help"],
.str-text-field-readonly+[role="help"] {
    color: var(--theme-disabled-text-color);
}

[role="help"].hiddenbottom {
    display: none;
}

[size= "small"] {
    height: 40px;
}

[rendertype="filled"][size= "small"]>label {
    display: none;
}

[rendertype="filled"][size= "small"]>input,
[rendertype="filled"][size= "small"]>select {
    border: none;
    border-bottom: 1px solid var(--theme-secondary-text-color);
    border-radius: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

[rendertype="outline"][size= "small"]>input,
[rendertype="outline"][size= "small"]>select {
    padding-top: 5px;
    padding-bottom: 5px;
}

[rendertype="outline"].str-text-edit[size= "small"]>label {
    transform: translateY(-28px) scale(.75, .75);
}

[rendertype="outline"].str-text-edit[size= "small"][leadicon]>label {
    transform: translate(-32px, -28px) scale(.75, .75);
}

[role="formitem"]>input::-webkit-input-placeholder,
[role="formitem"]>textarea::-webkit-input-placeholder {
    color: transparent;
}

[rendertype="filled"][size= "small"]>input::-webkit-input-placeholder,
.str-text-edit>input::-webkit-input-placeholder,
.str-text-edit>textarea::-webkit-input-placeholder {
    color: var(--theme-disabled-text-color);
}

[role="textareacontainer"]>[role="formitem"] {
    height: auto;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    box-shadow: 0 0 0px 1000px var(--theme-background-color) inset !important;
    -webkit-text-fill-color: var(--theme-primary-text-color);
}
[role="formitem"] input:-webkit-autofill,
[role="formitem"] textarea:-webkit-autofill,
[role="formitem"] select:-webkit-autofill {
    -webkit-text-fill-color: transparent;
}
.str-text-edit input:-webkit-autofill,
.str-text-edit textarea:-webkit-autofill,
.str-text-edit select:-webkit-autofill {
    -webkit-text-fill-color: var(--theme-primary-text-color);
}
[role="range"] {
    position: relative;
    height: 36px;
    margin: 0 8px;
    --range-color: var(--theme-color);
    --range-shadow-color: var(--theme-shadow-color-3);
}

.range-accent {
    --range-color: var(--accent-color);
    --range-shadow-color: var(--accent-shadow-color-3);
}

[role="range"] {
    text-align: left;
    height: 64px;
}

[role="range"]>input {
    width: calc(50% + 8px);
    opacity: 0;
    position: absolute;
    top: 36px;
    left: 0;
    height: 18px;
    cursor: pointer;
    z-index: 2;
    margin: auto;
    margin-left: -8px;
    transform: scale(2);
    transform-origin: left center;
}

[role="range"]>input:disabled {
    cursor: not-allowed;
}

[role="range"]>label:last-child {
    position: absolute;
    left: 0;
    right: 0;
    height: 36px;
    top: 28px;
    z-index: 1;
    pointer-events: none;
}

[role="range"]>label:last-child::after,
[role="range"]>label:last-child::before,
[role="range"]>label:last-child>span {
    content: "";
    display: inline-block;
    height: 2px;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}

[role="range"]>label:last-child:last-child::before {
    left: 0;
    width: var(--percent);
    background: var(--range-color);
}

[role="range"]>label:last-child:last-child::after {
    left: var(--percent);
    right: 0;
    background: var(--theme-disabled-button-text-color);
}

[role="range"]:hover>input+label:last-child::after,
[role="range"]>input:focus+label:last-child::after {
    left: var(--percent);
    right: 0;
    background: var(--theme-disabled-text-color);
}

[role="range"]>label:last-child>span {
    left: var(--percent);
    height: 12px;
    width: 12px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--range-color);
    transition-duration: 150ms;
    transition-timing-function: var(--animation-standard);
    transition-property: width, height, border-width;
    background-clip: content-box;
    transition: border 75ms var(--animation-standard);
    border: 0px solid rgba(0, 0, 0, 0.0);
    z-index: 1;
}

[role="range"]>input:focus+label:last-child>span {
    height: 16px;
    width: 16px;
    transition-duration: 150ms;
    border: 12px solid var(--range-shadow-color)
}

[role="range"]>input+label:last-child>span.range-tip::before {
    content: "";
    position: absolute;
    background: var(--range-color);
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 15px 15px 15px 0;
    margin-left: 50%;
    margin-top: 0px;
    opacity: 0.3;
    transform: translate(-50%, -50%) rotate(-45deg) scale(0, 0);
    transition: all 150ms var(--animation-standard);
}

[role="range"]>input:focus+label:last-child>span.range-tip::before {
    opacity: 1;
    margin-top: -30px;
    transform: translate(-50%, -50%) rotate(-45deg) scale(1, 1);
}

[role="range"]>input+label:last-child>span.range-tip::after {
    color: var(--theme-text-color);
    content: attr(data-value);
    position: absolute;
    top: -40px;
    margin-left: 50%;
    transform: translateX(-50%) scale(0);
    opacity: 0.0;
    transition: transform 150ms var(--animation-standard), opacity 150ms var(--animation-standard);
}

[role="range"]>input:focus+label:last-child>span.range-tip::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

[role="range"]>input:disabled+label:last-child::before {
    background: var(--theme-disabled-button-text-color) !important;
}

[role="range"]>input:disabled+label:last-child::after {
    background: var(--theme-disabled-button-text-color) !important;
}

[role="range"]>input:disabled+label:last-child>span {
    background: var(--theme-disabled-button-text-rgb-color) !important;
    width: 8px;
    height: 8px;
}

label[type="checkbox"],
label[type="radio"],
label[type="switchbox"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    --toggle-theme-color: var(--theme-color);
    --toggle-theme-text-color: var(--theme-primary-reverse-text-color);
    --switch-theme-color: var(--theme-half-color);
    --toggle-shadow-color: var(--theme-shadow-color-3);
}

.toggle-accent {
    --toggle-theme-color: var(--accent-color);
    --switch-theme-color: var(--accent-half-color);
    --toggle-shadow-color: var(--accent-shadow-color-3);
}

[type="checkbox"]>input[type="checkbox"],
[type="switchbox"]>input[type="checkbox"],
[type="radio"]>input[type="radio"] {
    position: absolute;
    left: 0;
    top: 0;
    clip: rect(0, 0, 0, 0);
}

[type="checkbox"]>input[type="checkbox"]+i>svg,
[type="radio"]>input[type="radio"]+i>svg {
    border: 2px solid var(--theme-secondary-text-color);
    box-sizing: border-box;
    border-radius: 2px;
}

[type="radio"]>input[type="radio"]+i>svg {
    border-radius: 50%;
}

[type="checkbox"]>input[type="checkbox"]:disabled+i>svg,
[type="radio"]>input[type="radio"]:disabled+i>svg {
    border: 2px solid var(--theme-disabled-button-text-color);
}

[type="checkbox"]>input[type="checkbox"]+i,
[type="radio"]>input[type="radio"]+i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin: 3px 3px 3px 4px;
    box-shadow: 0 0 0 0 var(--light-shadow-color3);
}

[type="switchbox"]>input[type="checkbox"]+i {
    width: 36px;
    height: 14px;
    background-color: var(--theme-disabled-text-color);
    border-radius: 7px;
    transition: background-color 150ms var(--animation-standard);
    position: relative;
    margin: 3px 6px;
}

[type="switchbox"]>input[type="checkbox"]+i::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: var(--hb-1-shadow), 0 0 0 1rem rgba(0, 0, 0, 0);
    transition-duration: 150ms;
    transition-timing-function: var(--animation-standard);
    transition-property: box-shadow, background-color, left;
    background-color: var(--theme-switch-slider-color);
    z-index: 1;
}

[type="switchbox"]>input[type="checkbox"]:checked:disabled+i,
[type="switchbox"]>input[type="checkbox"]:disabled+i {
    background-color: var(--theme-decoration-color);
}

[type="switchbox"]>input[type="checkbox"]:focus+i::before {
    box-shadow: var(--hb-1-shadow), 0 0 0 1rem var(--light-shadow-color3);
}

[type="switchbox"]>input[type="checkbox"]:checked:disabled+i::before,
[type="switchbox"]>input[type="checkbox"]:disabled+i::before {
    background-color: var(--theme-disabled-switch-slider-color);
}

[type="switchbox"]>input[type="checkbox"]:focus:checked+i::before {
    box-shadow: var(--hb-1-shadow), 0 0 0 1rem var(--toggle-shadow-color);
}

[type="switchbox"]>input[type="checkbox"]:checked+i::before {
    content: "";
    left: 20px;
    background-color: var(--toggle-theme-color);
}

[type="switchbox"]>input[type="checkbox"]:checked+i {
    background-color: var(--switch-theme-color);
}

[type="checkbox"]>input[type="checkbox"]:focus+i,
[type="radio"]>input[type="radio"]:focus+i {
    box-shadow: 0 0 0 1rem var(--light-shadow-color3);
    transition: box-shadow 0.2s ease;
}

[type="checkbox"]>input[type="checkbox"]:focus:checked+i,
[type="radio"]>input[type="radio"]:focus:checked+i,
[type="switchbox"]>input[type="checkbox"]:focus:checked+i::before {
    animation: boxShadow 0.3s ease-out forwards;
}

@keyframes boxShadow {
    0% {
        box-shadow: 0 0 0 0 var(--toggle-shadow-color);
    }

    25% {
        box-shadow: 0 0 0 1rem var(--toggle-shadow-color);
    }

    75% {
        box-shadow: 0 0 0 1rem var(--toggle-shadow-color);
    }

    100% {
        animation-timing-function: ease-in;
        box-shadow: 0 0 0 0 var(--toggle-shadow-color);
    }
}

[type="checkbox"]>input[type="checkbox"]:checked+i>svg,
[type="checkbox"]>input[type="checkbox"]:indeterminate+i>svg {
    border-width: 0;
    background: var(--toggle-theme-color);
}

[type="radio"]>input[type="radio"]:checked+i>svg {
    border-color: var(--toggle-theme-color);
}

[type="checkbox"]>input[type="checkbox"]:checked:disabled+i>svg {
    background: var(--theme-disabled-button-text-color);
}

[type="radio"]>input[type="radio"]:checked:disabled+i>svg {
    border-color: var(--theme-disabled-button-text-color);
}

[type="checkbox"]>input[type="checkbox"]+i>svg>path,
[type="radio"]>input[type="radio"]+i>svg>path {
    fill: transparent;
}

[type="checkbox"]>input[type="checkbox"]:indeterminate+i>svg>path {
    d: path("M 4 11 L 20 11 L 20 13 L 4 13 Z");
    fill: var(--toggle-theme-text-color);
}

[type="checkbox"]>input[type="checkbox"]:checked+i>svg>path {
    fill: var(--toggle-theme-text-color);
}

[type="radio"]>input[type="radio"]:checked:disabled+i>svg>path {
    fill: var(--theme-disabled-button-text-color);
}

[type="radio"]>input[type="radio"]:checked+i>svg>path {
    fill: var(--toggle-theme-color);
}

.date-picker-container {
    position: fixed;
    z-index: 24;
    width: 328px;
    height: 512px;
    transition: height var(--animation-standard-time) var(--animation-standard);
    top: calc(50vh - 256px);
    left: calc(50vw - 164px);
    color: white;
    box-shadow: var(--hb-24-shadow);
    border-radius: 4px;
    display: flex;
    flex-flow: column nowrap;
    transform-origin: center;
}

.date-picker-container.popup-static-out {
    animation: downToUp .22s ease-out forwards;
}

@keyframes downToUp {
    0% {
        transform: translateY(100vh);
        transform: scale(0.5);
    }

    100% {
        transform: translateY(0);
        transform: scale(1);
    }
}

.date-picker-container.popup-static-in {
    animation: upToDown .10s ease-in forwards;
}

@keyframes upToDown {
    0% {
        transform: translateY(0);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh);
        transform: scale(0.9);
        opacity: 0;
    }
}

.date-picker-container .select-area {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    font-size: 24px;
    color: var(--dark-secondary-text-color);
}

.date-picker-container .select-area>.active {
    color: var(--theme-text-color);
}

.date-picker-container::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    padding: 16px;
    background: var(--theme-disabled-button-text-color);
}

.popup-static-out.date-picker-container::before {
    animation: dataShadowIn .22s .22s forwards ease-out;
}

@keyframes dataShadowIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.popup-static-in.date-picker-container::before {
    animation: dataShadowOut .18s forwards ease-in;
}

@keyframes dataShadowOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.date-picker-container>header {
    background: var(--theme-color);
    height: 120px;
    box-sizing: border-box;
    padding: 16px 0px 0 12px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}

.date-picker-container>header>h3 {
    margin: 0;
    line-height: 1rem;
    font-weight: normal;
    font-size: 0.75rem;
    vertical-align: bottom;
    padding-left: 1rem;
}

.date-picker-container>header>div {
    display: flex;
    justify-content: space-between;
    padding: 0 8px 0 12px;
    align-items: center;
    margin-bottom: 4px;
}

.date-picker-container>header>div>i {
    padding: 1rem;
    border-radius: 50%;
    height: 24px;
    color: var(--theme-text-color);
}

.date-picker-container>header>div>i>svg {
    color: var(--theme-text-color);
}

.date-picker-container>header>div>span {
    font-size: var(--headline-size);
    line-height: var(--headline-height);
}

.date-picker-container>.page-container {
    height: 336px;
    background: var(--theme-dialog-color);
    margin: 0;
    color: var(--theme-primary-text-color);
}

.date-picker-container>footer {
    background: var(--theme-dialog-color);
    display: flex;
    flex-flow: row-reverse;
    padding: 10px 12px;
    box-sizing: border-box;
}

.select-date-container {
    height: 56px;
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    align-items: center;
}

.select-date-container>span>i {
    margin-left: 4px;
}

.select-date-container>div>i {
    padding: 16px;
    border-radius: 50%;
    height: 20px;
}

.select-date-container>span {
    font-weight: bold;
    color: var(--theme-secondary-text-color);
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 20px;
}

.select-date-container>span>i>svg {
    color: var(--theme-secondary-text-color);
}

.select-date-container>div {
    display: flex;
    color: var(--theme-secondary-text-color);
}

.select-main-container {
    padding: 0 12px;
    box-sizing: border-box;
    overflow: hidden;
}

[role="bottomnav"] ul,
.str-drawer-step-container ul,
.select-main-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
}

.select-main-container .select-month-container>li,
.select-main-container .date-week-container>li {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin: 0 2px;
    border-radius: 50%;
    box-sizing: border-box;
}

.select-main-container ul>li.current {
    border: 1px solid var(--theme-primary-text-color)
}

.select-main-container ul>li.selected {
    color: white;
    background: var(--theme-color);
}

.select-main-container .select-month-container>li:nth-child(7n),
.select-main-container .date-week-container>li:nth-child(7n) {
    margin-right: 0;
}

.select-main-container .select-month-container>li:nth-child(7n + 1),
.select-main-container .date-week-container>li:nth-child(7n + 1) {
    margin-left: 0;
}

.month-container {
    width: 304px;
    position: relative;
    height: 240px;
}

.date-picker-second {
    height: 264px;
}

.date-picker-second>.page-container {
    height: 88px;
}

.date-picker-input-container {
    padding: 16px 24px 0;
    height: 88px;
    box-sizing: border-box;
}

.date-picker-input-container.flex-container {
    display: flex;
}

.date-picker-input-container.flex-container>[role="formitemcontainer"]:first-child {
    margin-right: 16px;
}

.date-picker-input-container.flex-container>[role="formitemcontainer"] {
    width: calc(50% - 8px);
    min-width: auto;
}

.date-picker-input-container [role="help"] {
    display: none;
}

.month-container>ul {
    width: 100%;
    align-content: flex-start;
    height: 240px;
    background: var(--theme-dialog-color);
}

.current-container,
.back-container {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.back-container {
    z-index: 0;
}

.date-turn-left>.current-container,
.date-turn-left>.back-container {
    animation: turnLeft .15s forwards ease;
}

.date-turn-left>.back-container {
    left: 304px;
}

.date-turn-right>.current-container,
.date-turn-right>.back-container {
    animation: turnRight .15s forwards ease;
}

.date-turn-right>.back-container {
    left: -304px;
}

@keyframes turnLeft {
    to {
        transform: translateX(-304px);
    }
}

@keyframes turnRight {
    to {
        transform: translateX(304px);
    }
}

.select-year-mode>div {
    display: none;
}

.select-year-mode+main>ul,
.select-year-mode+main>.month-container {
    display: none;
}

.select-year-mode+main {
    height: 280px;
    padding: 0 24px;
}

.year-container li {
    width: 88px;
    height: 52px;
    text-align: center;
    line-height: 52px;
    margin: 0 4px;
    color: var(--theme-primary-text-color);
    font-size: 1rem;
    padding: 8px 0;
    box-sizing: border-box;
}

.year-container li:nth-child(3n + 1) {
    margin-left: 0;
}

.year-container li:nth-child(3n) {
    margin-right: 0;
}

.year-container li>span {
    display: inline-block;
    width: 100%;
    line-height: 36px;
    border-radius: 18px;
}

.year-container li>span.selected {
    color: white;
    background: var(--theme-color);
}

.select-year-mode svg {
    transform: rotate(180deg);
}

.date-range-picker-container {
    width: 100vw;
    height: calc(100vh - var(--statusHeight) - var(--toolHeight));
    position: fixed;
    z-index: 24;
    background: white;
    top: calc(var(--statusHeight) + var(--toolHeight));
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    box-shadow: var(--hb-24-shadow);
    transition: height .15s ease;
    display: flex;
    flex-flow: column;
}

.time-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.time-container::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 280px;
    height: 280px;
    margin: auto;
    background: var(--grey-300);
    border-radius: 50%;
}

.hour-minute-container {
    margin: 0;
    padding: 0;
    position: relative;
    width: 2rem;
    height: 2rem;
    text-align: center;
    list-style: none;
    line-height: 2rem;
}

.hour-minute-container::before {
    content: "";
    width: 4px;
    height: 4px;
    background: var(--theme-color);
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    position: absolute;
    border-radius: 50%;
}

.hour-minute-container::after {
    display: block;
    content: "";
    width: 75px;
    width: var(--point-width);
    transform: var(--rotate-angle);
    height: 2px;
    background: var(--theme-color);
    position: absolute;
    left: 50%;
    top: calc(50% - 1px);
    transform-origin: left;
}

ul.hour-minute-container li {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

ul.hour-minute-container li span {
    display: inline-block;
}

ul.hour-minute-container li.active {
    border-radius: 50%;
    background: var(--theme-color);
    color: var(--theme-text-color);
}

ul.hour-minute-container li.active>span:empty::before {
    content: var(--str);
}

.date-range-picker-container::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: var(--theme-disabled-button-text-color);
    z-index: -1;
}

.date-range-picker-container>header {
    background: var(--theme-color);
    color: white;
}

.date-range-picker-container .header {
    display: flex;
    justify-content: space-between;
}

.date-range-picker-container .header>i {
    padding: 16px;
    border-radius: 50%;
    height: 24px;
}

.date-range-picker-container>header [role="icon"]>svg {
    color: var(--theme-text-color);
}

.date-range-picker-container .header>span {
    line-height: 24px;
    padding: 16px;
    letter-spacing: 2px;
    border-radius: 28px;
    display: inline-block;
}

.date-range-picker-container .edit-container {
    padding-left: 72px;
    margin-top: 8px;
    margin-bottom: 16px;
}

.date-range-picker-container .edit-container>h3 {
    margin: 0;
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1;
}

.date-range-picker-container .show-container {
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 22px;
    line-height: 24px;
}

.date-range-picker-container .show-container .edit {
    color: rgba(255, 255, 255, 0.54);
}

.date-range-picker-container .show-container>div {
    display: flex;
}

.date-range-picker-container .show-container>div>i {
    margin: 0 .15em;
}

.date-range-picker-container .select-date:empty::before {
    content: "开始日期";
    color: rgba(255, 255, 255, .38);
}

.date-range-picker-container .select-date:last-child:empty::before {
    content: "结束日期";
}
.date-range-picker-container .show-time .select-date:empty::before {
    content: "开始时间";
}

.date-range-picker-container .show-time .select-date:last-child:empty::before {
    content: "结束时间";
}

.date-range-picker-container .show-container>i {
    padding: 16px;
    margin-bottom: -16px;
    border-radius: 50%;
    height: 24px;
}

.date-range-picker-container>.page-container {
    flex: 1;
    background: var(--theme-dialog-color);
    -webkit-overflow-scrolling: touch;
    -webkit-overscroll-behavior: contain;
    overscroll-behavior: contain;
    overflow: hidden;
}
.date-range-picker-container .popup-change {
    height: 100%;
}

.select-range-date-container {
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    color: var(--theme-primary-text-color);
}

.select-range-date-container>.date-week-container {
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

.select-range-date-container>.date-week-container>li {
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
}

.select-range-main-container {
    height: calc(100% - 48px);
    padding: 0 12px;
    overflow: hidden;
    color: var(--theme-primary-text-color);
}

.select-range-main-container h3 {
    font-weight: normal;
    padding-left: 12px;
    margin: 0;
    height: 48px;
    line-height: 64px;
    font-size: 1rem;
}

.select-range-main-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-flow: row wrap;
}

.select-range-main-container ul>li {
    padding: 4px;
    text-align: center;
    position: relative;
    margin-right: calc((100vw - 360px) / 6);
}

.select-range-main-container ul>li:nth-child(7n) {
    margin-right: 0;
}

.select-range-main-container ul>li::before {
    position: absolute;
    z-index: 1;
}

.select-range-main-container ul>li.select-area-begin::before,
.select-range-main-container ul>li.select-area-begin~li::before {
    background: var(--theme-color);
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    opacity: .12;
    content: "";
    right: calc((-100vw + 360px) / 6);
}

.select-range-main-container ul>li.select-area-begin::before {
    left: 4px !important;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.select-range-main-container ul>li.select-area-begin~li:nth-child(7n)::before {
    content: "";
    right: -12px;
}

.select-range-main-container ul>li.select-area-begin~li:nth-child(7n + 1)::before {
    content: "";
    left: -12px;
}

.select-range-main-container ul>li.select-area-end~li::before {
    content: "";
    background: transparent;
}

.select-range-main-container ul>li:last-child::before,
.select-range-main-container ul>li.select-area-end::before {
    right: 4px !important;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.select-range-main-container ul>li:nth-child(7n)::before {
    right: -12px !important;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0;
}

.select-range-main-container ul>li:nth-child(7n + 1)::before {
    left: -12px !important;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.select-range-main-container ul>li.select-area-end.selected:nth-child(7n)::before {
    right: 4px !important;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.select-range-main-container ul>li.select-area-begin.selected:nth-child(7n + 1)::before {
    left: 4px !important;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.select-range-main-container ul>li>span {
    display: block;
    line-height: 40px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    width: 40px;
    box-sizing: border-box;
    height: 40px;
}

.select-range-main-container ul>li.now span {
    border: 1px solid currentColor;
}

.select-range-main-container ul>li.selected span {
    color: white;
    background: var(--theme-color);
    border-width: 0px;
}

.date-picker-second {
    width: 328px;
    height: 264px;
    border-radius: 4px;
    top: calc(50vh - 132px);
}

.date-picker-second .header {
    display: none;
}

.date-picker-second .edit-container {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 16px 8px 0 24px;
    margin-bottom: 0;
    width: 100%;
}

.date-picker-second .edit-container > .show-time {
    display: none;
}

.date-picker-second .show-container {
    margin-bottom: 16px;
}

.date-range-picker-container>footer {
    display: none;
}

.date-picker-second>header {
    height: 120px;
    display: flex;
}

.date-picker-second>footer {
    background: var(--theme-dialog-color);
    display: flex;
    flex-flow: row-reverse;
    padding: 10px 12px;
    box-sizing: border-box;
}

.date-range-picker-container .date-picker-input-container {
    display: flex;
    justify-content: space-between;
}

.date-range-picker-container .date-picker-input-container>[role="formitemcontainer"] {
    width: calc(50% - 4px);
    min-width: auto;
}

[role="icon"].disabled,
.str-disabled-date-item {
    color: var(--theme-disabled-button-text-color) !important;
    cursor: not-allowed;
}
[role="icon"].ripple.disabled::before {
    background: transparent;
}

[role="daterange"] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.date-picker-input-container>[role="formitemcontainer"] {
    width: 100%;
}

[role="daterange"]>[role="formitemcontainer"] {
    width: calc(50% - 8px);
    min-width: auto;
}

.str-date-area-help-container {
    width: 100%;
    margin-bottom: 16px;
    margin-top: -16px;
    padding: 0 16px;
    font-size: 12px;
    line-height: 2;
    color: var(--theme-secondary-text-color);
    height: 2em;
}

.hiddenbottom {
    display: none;
}
.str-menulist {
    position: fixed;
    z-index: 24;
}
.str-menulist .str-dialog-mask {
    background: transparent;
}
[role="menulist"] {
    z-index: 8;
    box-shadow: var(--hb-8-shadow);
    padding: 8px 0;
    min-width: 112px;
    max-width: 280px;
    box-sizing: border-box;
    display: inline-block;
    position: absolute;
    border-radius: 4px;
    cursor: pointer;
    background: var(--theme-dialog-color);
    max-height: 200px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-overscroll-behavior: contain;
    overscroll-behavior: contain;
}

.str-menu-item {
    padding: 0 16px;
    display: flex;
    line-height: 48px;
    justify-content: space-between;
    align-items: center;
}

[role="menulist"]>input {
    position: absolute;
    clip: rect(0 0 0 0);
}

[role="menulist"]>input+label {
    position: relative;
}

[role="menulist"]>input+label>.input-icon {
    fill: currentColor;
    width: 24px;
    height: 24px;
    display: none;
    left: 8px;
    top: 12px;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}

[role="menulist"]>input:checked+label>.input-icon {
    display: inline-block;
}

[role="menulist"]>label>div {
    padding-left: 36px;
}

.str-menu-item:hover {
    opacity: 0.87;
}

.menulist-before-icon {
    margin-right: 16px;
}

.menulist-after-icon {
    margin-left: 16px;
}

.str-menu-item>span {
    margin-right: auto;
}

.str-menu-item i {
    height: 24px;
    display: inherit;
}

.str-menu-item:focus {
    outline: none;
    background: var(--theme-decoration-color);
}

[role="dropdown"] {
    position: relative;
}

[role="dropdown"] .str-menu-item {
    line-height: 32px;
}

[role="dropdown"] [role="menulist"] {
    min-width: 60px;
    max-height: 144px;
}

[size="normal"] .dropdown-list {
    top: 56px;
}

[size="small"] .dropdown-list {
    top: 40px;
}

[status="up"] .dropdown-list {
    top: 0;
    transform: translateY(calc(-100% - 1px));
}

.dropdown-list {
    max-width: initial;
    display: none;
    width: 100%;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    /* transition: max-height 150ms ease; */
}

[role="dropdown"]:hover .dropdown-list {
    display: block;
    /* max-height: 0; */
}
[role="dropdown"][status="hidden"]:hover .dropdown-list {
    display: none;
}

[size="small"]>.close-icon {
    top: 0px;
}

[size="normal"]>.close-icon {
    top: 8px;
}

.dropdown-trailicon>.close-icon {
    right: 40px;
}

i.close-icon {
    position: absolute;
    color: var(--theme-icon-color);
    right: 8px;
    padding: 8px;
    border-radius: 50%;
    height: 40px;
    box-sizing: border-box;
}

[role="uploader"] {
    position: relative;
    --color: var(--theme-text-color);
    --background-color: var(--theme-color);
    --hb-color-1: var(--theme-shadow-color-1);
    --hb-color-2: var(--theme-shadow-color-2);
    --hb-color-3: var(--theme-shadow-color-3);
}

[role="uploader"] .uploader-main {
    display: none;
}

[role="uploader"].self-class>input[type="file"],
[role="uploader"][type="btn"]>input[type="file"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    left: 0;
    top: 0;
    width: 0;
    height: 0;
}

.uploader-accent {
    --color: var(--accent-text-color);
    --background-color: var(--accent-color);
    --hb-color-1: var(--accent-shadow-color-1);
    --hb-color-2: var(--accent-shadow-color-2);
    --hb-color-3: var(--accent-shadow-color-3);
}

[role="uploader"][type="self"]>input[type="file"]+div,
[role="uploader"][type="btn"]>input[type="file"]+div {
    display: block;
}

[role="uploader"][type="btn"]>input[type="file"]+div>label {
    color: var(--color);
    background-color: var(--background-color);
}

.uploader-file-detail {
    word-break: break-all;
}

[role="uploader"] {
    margin-bottom: 1rem;
}

.str-uploader-help-container {
    padding: 0;
}

[role="indicator"] {
    --progress-color: var(--theme-color);
}

.progress-accent {
    --progress-color: var(--accent-color);
}

.line-progress-loading,
.line-progress-loaded {
    overflow: hidden;
    position: relative;
    height: 4px;
    margin: 8px 0;
}

.line-progress-loading::before,
.line-progress-loaded::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: var(--progress-color);
    opacity: 0.24;
    z-index: 1;
}

.line-progress-loading::after,
.line-progress-loaded::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    background: var(--progress-color);
    height: 4px;
}

.line-progress-loading::after {
    animation: change-left 1s ease-in-out infinite both, change-width 1s linear infinite both;
}

.line-progress-loaded::after {
    animation: to-max-width 100s linear;
    animation-play-state: paused;
    animation-delay: inherit;
}

@keyframes change-left {
    from {
        left: -19%;
    }

    to {
        left: 100%;
    }
}

@keyframes change-width {
    from {
        width: 20%;
    }

    50% {
        width: 60%;
    }

    to {
        width: 30%;
    }
}

.change-container[data-layout="loaded"]::after {
    animation: to-max-width 100s linear;
    animation-play-state: paused;
    animation-delay: inherit;
}

@keyframes to-max-width {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.circle-loading,
.circle-loaded {
    width: 48px;
    height: 48px;
}

.circle-loading {
    animation: rotateSvg 2s infinite linear
}

.circle-loading>circle {
    animation: circleLoading 1.5s ease-in-out infinite;
    stroke-width: 2;
    stroke: var(--progress-color);
    transform-origin: center;
    stroke-linecap: round;
    fill: none;
}

@keyframes rotateSvg {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes circleLoading {
    0% {
        stroke-dasharray: 1, 80;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 36, 60;
        stroke-dashoffset: -16;
    }

    100% {
        stroke-dasharray: 36, 60;
        stroke-dashoffset: -48;
    }
}

.circle-loaded {
    transform: rotate(-90deg);
}

.circle-loaded>circle {
    stroke-width: 2;
    stroke: var(--progress-color);
    animation: circle-loaded 100s linear;
    animation-play-state: paused;
    animation-delay: inherit;
    fill: none;
}

@keyframes circle-loaded {
    0% {
        stroke-dasharray: 0, 50;
    }

    100% {
        stroke-dasharray: 50, 50;
    }
}

[role="fresh"] {
    --top: -60px;
    --opacity: 0.2;
    position: absolute;
    left: 0;
    top: var(--top);
    z-index: 3;
    background: var(--theme-dialog-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--hb-3-shadow);
    right: 0;
    margin: auto;
    opacity: var(--opacity);
    --rotatesvg: rotate(0deg);
    --dasharray: 0 42;
    --color: var(--theme-color);
}

[role="fresh"]>svg {
    transform: var(--rotatesvg);
    width: 28px;
    height: 28px
}

[role="fresh"] circle {
    stroke: var(--color);
    stroke-dasharray: var(--dasharray);
    stroke-width: 2;
    fill: none;
}

[role="fresh"] path {
    fill: var(--color);
}

[role="fresh"].go-to-normal {
    animation: goToNormal .2s ease forwards;
}

[role="fresh"].go-to-top {
    animation: goToTop .2s ease forwards;
}

@keyframes goToNormal {
    to {
        top: 20px;
        opacity: 1;
    }
}

@keyframes goToTop {
    to {
        top: var(--top);
    }
}

[role="fresh"].circle-loading circle {
    animation: rotateSvg 2s infinite linear, circleLoading 1.5s ease-in-out infinite;
    transform-origin: center;
}

[role="fresh"].circle-loading path {
    fill: none;
}

[role="uploadercontainer"] {
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-overscroll-behavior: contain;
    overscroll-behavior: contain;
}

[role="uploadercontainer"]>.progress-container {
    text-align: center;
}

[role="uploadercontainer"]>.progress-container>svg {
    display: none;
    width: 24px;
    height: 24px;
    margin: .5rem;
}

[role="uploadercontainer"].show-loading>.progress-container>svg {
    display: inline-block;
}

[role="tab"] {
    --tab-color: var(--theme-color);
    --tab-shadow-color: var(--theme-shadow-color-3);
    --icon-color: var(--theme-secondary-text-color);
    overflow: auto;
    width: 100%;
    background: var(--theme-toolbar-color);
    -webkit-overflow-scrolling: touch;
    -webkit-overscroll-behavior: contain;
    overscroll-behavior: contain;
}

[role="tab"]>.str-tab-content {
    display: flex;
    width: 100%;
    align-items: center;
    line-height: 24px;
    position: relative;
}

[role="tab"][rendertype="scroll"]>.str-tab-content {
    display: inline-flex;
    width: auto;
}

[role="tab"][rendertype="scroll"] .str-tab-item {
    padding: 12px 16px;
    width: auto;
}

.str-tab-content::after {
    content: "";
    height: 2px;
    width: var(--length);
    position: absolute;
    z-index: 1;
    left: var(--start);
    bottom: 0px;
    background: var(--tab-color);
    transition-property: width, left;
    transition-duration: .15s;
}

.str-tab-item {
    width: var(--width);
    padding: 12px 0;
    text-align: center;
    text-transform: uppercase;
    box-sizing: border-box;
    transition: background-color 0.15s;
}

.str-tab-item:hover {
    background: var(--tab-shadow-color);
}

.str-tab-item>[role="icon"] {
    height: 24px;
    display: inherit;
}

.str-tab-item>[role="icon"] svg {
    fill: var(--icon-color);
}

.str-tab-item.active {
    color: var(--tab-color);
}

.str-tab-item.active>[role="icon"] svg {
    fill: var(--tab-color);
}

.str-tab-accent {
    --tab-color: var(--accent-color);
    --tab-shadow-color: var(--accent-shadow-color-3);
}

[role="chip"] {
    position: relative;
    height: 32px;
    border-radius: 16px;
    background: var(--theme-statusbar-color);
    line-height: 32px;
    padding: 0 12px;
    margin: 4px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    box-shadow: var(--hb-0-shadow);
    transition: box-shadow .15s ease;
    vertical-align: middle;
}

[role="chip"]:active {
    box-shadow: var(--hb-2-shadow);
}

[role="chip"]>input[type="checkbox"],
[role="chip"]>input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    top: 0;
}

[role="chip"] [role="icon"] {
    display: inherit;
}

[role="chip"]>img {
    width: 24px;
    height: 24px;
    margin: 4px 8px 4px -8px;
    border-radius: 50%;
}

[role="chip"]>input+label {
    margin: 0 -12px;
    padding: 0 12px;
    background: var(--theme-statusbar-color);
    transition: background-color .15s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    position: relative;
}

[role="chip"]>input:checked+label::before {
    content: "";
    width: 24px;
    height: 24px;
    background: var(--grey-500);
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="rgba(255, 255, 255, .87)" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg>');
    display: inline-block;
    margin-right: 8px;
    margin-left: -8px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}

[role="chip"]>input:focus+label,
[role="chip"]>input:checked+label {
    background: var(--theme-disabled-button-color);
}

[role="chip"][location="before"]>input:checked+label::before {
    left: 13px;
    top: 4px;
    position: absolute;
}

[role="chip"] i[role="icon"] {
    color: var(--grey-500);
}

i.chip-prev-icon {
    margin-right: 8px;
    margin-left: -4px;
}

i.chip-next-icon {
    margin-left: 8px;
    margin-right: -4px;
}

[role="stepper"] {
    padding: 24px 0;
    --stepper-color: var(--theme-color);
    --stepper-active-color: var(--theme-color);
    --help-color: var(--theme-shadow-color-1);
}

[role="stepper"][direction="column"] {
    display: flex;
    flex-direction: column;
}

[role="stepper"][direction="row"] {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.str-stepper-item {
    position: relative;
}

[role="stepper"][direction="column"]>.str-stepper-item {
    padding: 4px 24px 40px 56px;
    min-height: 24px;
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position: left 28px top;
    background-image: linear-gradient(180deg, transparent 28px, var(--help-color) 28px, var(--help-color) calc(100% - 4px), transparent 0);
}

[role="stepper"][direction="column"]>.str-stepper-item.str-stepper-item-active,
[role="stepper"][direction="column"]>.str-stepper-item.str-stepper-item-active~.str-stepper-item {
    background-image: linear-gradient(180deg, transparent 28px, var(--theme-decoration-color) 28px, var(--theme-decoration-color) calc(100% - 4px), transparent 0);
}

[role="stepper"][direction="column"]>.str-stepper-item:last-child {
    background: none !important;
}

.str-stepper-item>[role="icon"] {
    border-radius: 50%;
    padding: 16px;
    height: 24px;
}

[role="stepper"][direction="column"]>.str-stepper-item>[role="icon"] {
    position: absolute;
    left: 0px;
    top: -16px;
    width: 24px;
}

.str-stepper-item.str-stepper-item-complete>[role="icon"] {
    color: var(--stepper-color);
}

.str-stepper-item.str-stepper-item-active>[role="icon"] {
    color: var(--stepper-active-color);
}

[role="stepper"][direction="column"]>.str-stepper-item:last-child {
    padding-bottom: 0px;
}

[role="stepper"][direction="row"]>.str-stepper-item {
    text-align: center;
    flex: 1;
    background-size: 50% 1px;
    background-repeat: no-repeat;
}

[role="stepper"][direction="row"]>.str-stepper-item {
    background-position: right top 12px, left top 12px;
    background-image: linear-gradient(90deg, transparent 14px, var(--help-color) 0px, var(--help-color) 100%), linear-gradient(90deg, var(--help-color) 0px, var(--help-color) calc(100% - 14px), transparent 0);
}

[role="stepper"][direction="row"]>.str-stepper-item.str-stepper-item-active {
    background-image: linear-gradient(90deg, transparent 14px, var(--theme-decoration-color) 0px, var(--theme-decoration-color) 100%), linear-gradient(90deg, var(--help-color) 0px, var(--help-color) calc(100% - 14px), transparent 0);
}

[role="stepper"][direction="row"]>.str-stepper-item.str-stepper-item-active~.str-stepper-item {
    background-image: linear-gradient(90deg, transparent 14px, var(--theme-decoration-color) 0px, var(--theme-decoration-color) 100%), linear-gradient(90deg, var(--theme-decoration-color) 0px, var(--theme-decoration-color) calc(100% - 14px), transparent 0);
}

[role="stepper"][direction="row"]>.str-stepper-item:first-child {
    background-position: right top 12px;
    background-image: linear-gradient(90deg, transparent 14px, var(--help-color) 0px, var(--help-color) 100%);
}

[role="stepper"][direction="row"]>.str-stepper-item:last-child {
    background-position: left top 12px;
    background-image: linear-gradient(90deg, var(--help-color) 0px, var(--help-color) calc(100% - 14px), transparent 0);
}

[role="stepper"][direction="row"]>.str-stepper-item.str-stepper-item-active~.str-stepper-item:last-child {
    background-image: linear-gradient(90deg, var(--theme-decoration-color) 0px, var(--theme-decoration-color) calc(100% - 14px), transparent 0);
}

[role="stepper"][direction="row"] [role="icon"] {
    margin-top: -16px;
}

.stepper-title {
    color: var(--theme-primary-text-color);
}

.stepper-content {
    color: var(--theme-secondary-text-color);
}

[role="card"] {
    --translate: 0px;
    position: relative;
}

[role="card"]::before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    content: "";
    background: var(--theme-dialog-color);
    z-index: -1;
}

.str-card-detail {
    z-index: 2;
    border-radius: 4px;
    box-shadow: var(--hb-2-shadow);
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
    transform: translateX(var(--translate));
}

.card-media {
    background: gray;
}

.card-media>img {
    width: 100%;
    height: 194px;
}

.card-header {
    display: flex;
    padding: 0 16px;
    margin: 16px 0;
    align-items: center;
}

.card-header>img {
    width: 40px;
    height: 40px;
    margin-right: 16px;
}

.header-container {
    line-height: 1.4;
    font-size: 0.875rem;
}

.support-text {
    padding: 0 16px;
    margin: 16px 0;
}

.header-container>h3 {
    margin: 0;
    font-size: 18px;
    color: var(--theme-primary-text-color);
}

.card-foot-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.card-btn-container {
    margin-left: 8px;
}

.card-btn-container>[role="btn"] {
    padding-left: 8px;
    padding-right: 8px;
    min-width: auto;
}

.card-btn-container>[role="btn"]:not(:last-child) {
    margin-right: 8px;
}

.card-icons-container>[role="icon"] {
    height: 24px;
    padding: 12px;
    border-radius: 50%;
    margin-bottom: -6px;
}

.card-icons-container>[role="icon"]:focus,
.card-icons-container>[role="icon"]:active {
    color: var(--theme-color);
}

.card-icons-container>[role="icon"]:not(:last-child) {
    margin-right: 8px;
}

[role="listitem"][type="single"],
[role="listitem"][type="double"],
[role="listitem"][type="triple"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-single {
    line-height: 48px;
    padding: 0 16px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-double,
.content-triple {
    padding: 12px 16px;
    flex: 1;
}

.content-double {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-double>h3,
.content-triple>h3 {
    margin: 0;
    font-size: 1em;
    line-height: 20px;
    color: var(--theme-primary-text-color);
}

.content-double>div,
.content-triple>div {
    font-size: 0.875rem;
    line-height: 20px;
    color: var(--theme-secondary-text-color);
}

.content-double>div {
    overflow: hidden;
    text-overflow: ellipsis;
}

.str-list-double>.after-text,
.str-list-triple>.after-text {
    align-self: flex-start;
    font-size: 12px;
    margin-top: 16px;
}

.str-list-double>.before-icon,
.str-list-triple>.before-icon {
    margin: 8px 0;
    align-self: flex-start;
}

.str-list-double>.before-avatar,
.str-list-triple>.before-avatar {
    margin: 16px 0px 16px 16px;
    align-self: flex-start;
}

[role="listitem"] i[role="icon"] {
    height: 24px;
}

[role="listitem"] .after-icon>i[role="icon"] {
    padding: 12px;
    color: var(--theme-secondary-text-color);
    border-radius: 50%;
}

[role="listitem"] .before-icon>i[role="icon"] {
    padding: 16px;
    color: var(--theme-secondary-text-color);
    border-radius: 50%;
}

[role="listitem"] .after-text {
    color: var(--theme-disabled-text-color);
    margin-right: 16px;
    font-size: 0.625em;
}

.before-avatar {
    width: 40px;
    height: 40px;
    margin: 8px 0px 8px 16px;
}

.before-avatar>img,
.before-media>img {
    width: 100%;
    height: 100%;
}

.before-media {
    width: 56px;
    height: 56px;
    margin: 8px 0px 8px 16px;
}

[role="bottomnav"] {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    width: 100%;
    left: 0;
    --nav-color: var(--theme-color);
    background: var(--nav-color);
    color: white;
    font-size: 0.75rem;
    height: 56px;
    overflow: hidden;
    transform: scale(1, 1);
    transition: transform .15s;
    transform-origin: bottom center;
    z-index: 4;
    box-shadow: var(--hb-4-shadow);
}

.nav-accent {
    --nav-color: var(--accent-color);
}

.bottom-nav-hidden {
    transform: scale(1, 0);
}

[role="bottomnav"]>ul {
    display: flex;
    height: 100%;
}

[role="bottomnav"]>ul>li {
    width: var(--liheight);
    text-align: center;
    box-sizing: border-box;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[role="bottomnav"]>ul>li>[role="icon"] {
    height: 24px;
    color: var(--theme-text-color);
}

[role="bottomnav"]>ul>li>span {
    display: block;
}

[role="topbar"] {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    --color: var(--theme-text-color);
    --bcolor: var(--theme-color);
    color: var(--color);
    box-shadow: var(--hb-4-shadow);
    background: var(--bcolor);
    padding-top: var(--statusHeight);
    z-index: 4;
    overflow: hidden;
}

.bar-accent {
    --color: var(--accent-text-color);
    --bcolor: var(--accent-color);
}

[role="topbar"] i,
.str-bar-bottom-container i {
    display: inline-block;
    height: 24px;
    border-radius: 50%;
}

[role="topbar"] i[role="icon"]>svg {
    fill: var(--color);
}

[role="topbar"]>.bar-icon-group,
[role="topbar"]>.bar-icon-nav,
[role="topbar"]>.bar-icon-overflow {
    position: absolute;
    z-index: 1;
    top: var(--statusHeight);
}

[role="topbar"]>.bar-icon-overflow {
    top: calc(var(--statusHeight) + 6px);
}

.bar-icon-group {
    right: 42px;
    margin: 0;
    list-style: none;
    display: inline-flex;
    padding: 0;
    margin-left: auto;
}

.bar-icon-group>li>i {
    padding: 12px 12px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.bar-icon-nav {
    left: 0px;
    padding: 16px;
}

.bar-icon-overflow {
    right: 0px;
    padding: 10px;
}

[role="topbar"]>h1 {
    font-size: 1.25rem;
    font-weight: normal;
    margin: 0;
    padding-left: 16px;
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    line-height: 56px;
    transition: padding .2s ease, height .2s ease, font-size .2s ease;
}

[role="topbar"][size="expand"]>h1 {
    height: 128px;
    font-size: 1.5rem;
    padding-top: 64px;
}

[role="topbar"][size="small"]>h1 {
    height: 0px;
}

[role="topbar"][navicon]>h1 {
    padding-left: 72px;
}

.bottom-nav-test {
    width: 100vw;
    margin-left: -16px;
}

[role="asidenav"] {
    width: calc(100% - 64px);
    height: 100%;
    background: var(--theme-dialog-color);
    display: flex;
    flex-flow: column;
    max-width: 280px;
    --color: var(--theme-color);
    --color-alpha: var(--theme-shadow-color-1);
}

[role="asidenav"]>header {
    padding: .75rem 1rem 1rem;
}

[role="asidenav"] .drawer-header-title {
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: bolder;
    color: var(--theme-primary-text-color);
}

[role="asidenav"] .drawer-sub-title {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--theme-secondary-text-color);
}

.str-drawer-change-container {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-overscroll-behavior: contain;
    overscroll-behavior-y: contain;
}

.str-drawer-item {
    display: flex;
    align-items: center;
    height: 48px;
    margin: 4px 8px;
    border-radius: 4px;
    padding-left: 8px;
    width: 100%;
}

.str-drawer-item i {
    margin-right: 24px;
    height: 24px;
}

.str-drawer-change-container .str-drawer-step-container:not(:last-child)::after {
    content: "";
    width: 100%;
    height: 1px;
    background: var(--theme-disabled-button-color);
    display: block;
    margin: 8px 0;
}

.str-drawer-item-active {
    color: var(--color);
    background: var(--color-alpha);
}

.str-drawer-item-active i {
    color: var(--color);
}

.str-drawer-title {
    font-size: .75rem;
    margin-left: 16px;
    padding-top: 16px;
    line-height: 1;
    color: var(--theme-secondary-text-color);
    margin-bottom: 8px;
}

.str-drawer-step-active>.str-drawer-title {
    color: var(--color);
}

.popup-static-out [role="menulist"] {
    transform-origin: center;
    animation: menulistshow 180ms ease forwards;
    --startstatus: scale(1, 0);
}

@keyframes menulistshow {
    0% {
        opacity: 0.3;
        transform: var(--startstatus);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

.toast {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    transform-origin: center;
    z-index: 4;
    box-shadow: var(--hb-4-shadow);
    border-radius: 4px;
    overflow: hidden;
}

.toast.popup-static-out {
    animation: toastIn 180ms var(--animation-decelerate) forwards;
}

.toast.popup-static-in {
    animation: toastOut 120ms var(--animation-accelerate) forwards;
}

@keyframes toastIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes toastOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

.str-toast-message {
    background: var(--theme-reverse-background-color);
    color: var(--theme-primary-reverse-text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.str-toast-message>div {
    padding: 16px 8px 16px 16px;
    line-height: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
    overflow: hidden;
}

.str-toast-cancel {
    margin: 6px 8px;
}

.dialog,
.pagedialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 24;
    display: flex;
    justify-content: center;
    align-items: center;
    overscroll-behavior-y: contain;
}

.str-dialog-content {
    background: var(--theme-dialog-color);
    box-shadow: var(--hb-24-shadow);
    --startstatus: scale(0.5);
    --endstatus: scale(1.0);
    border-radius: 4px;
    width: 280px;
}

.dialog.popup-static-out {
    animation: transparentToOpacity 180ms forwards ease;
}

.dialog.popup-static-in {
    animation: opacityToTransparent 120ms forwards ease;
}

@keyframes transparentToOpacity {
    0% {
        background: transparent;
    }

    100% {
        background: rgba(0, 0, 0, 0);
    }
}

@keyframes opacityToTransparent {
    0% {
        background: rgba(0, 0, 0, 0);
    }

    100% {
        background: transparent;
    }
}

.popup-static-out>.str-dialog-content,
.pagedialog.popup-static-out>.str-page-container {
    animation: var(--animation-decelerate) dialogIn 180ms forwards
}

.popup-static-in>.str-dialog-content,
.pagedialog.popup-static-in>.str-page-container {
    animation: var(--animation-accelerate) dialogOut 120ms forwards
}

@keyframes dialogIn {
    0% {
        opacity: 0;
        transform: var(--startstatus);
        box-shadow: var(--hb-1-shadow);
    }

    100% {
        opacity: 1;
        transform: var(--endstatus);
        box-shadow: var(--hb-24-shadow);
    }
}

@keyframes dialogOut {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: var(--hb-24-shadow);
    }

    100% {
        opacity: 0;
        transform: scale(0.9);
        box-shadow: var(--hb-1-shadow);
    }
}

.str-dialog-content>header {
    margin: 16px 24px;
    font-size: var(--title-size);
    color: var(--theme-primary-text-color);
    text-align: left;
    font-weight: bold;
    line-height: 32px;
}

.str-dialog-change-container {
    overflow-y: auto;
    margin: 16px 24px 24px;
    line-height: 1.5;
}

.str-dialog-change-container>.opacityIn {
    animation: opacityIn 180ms var(--animation-decelerate);
}

.str-dialog-change-container>.opacityOut {
    animation: opacityOut 120ms var(--animation-accelerate);
}

@keyframes opacityIn {
    0% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

@keyframes opacityOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.str-dialog-btn-group {
    display: flex;
    height: 52px;
    padding: 8px 8px 8px 24px;
    box-sizing: border-box;
    justify-content: flex-end;
}

.str-dialog-btn-group>[role="btn"]+[role="btn"] {
    margin-left: 8px;
}

.str-dialog-mask {
    position: fixed;
    z-index: -1;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
}


/* .popup-static-out>.str-dialog-mask {
    animation: ease opacityIn 180ms forwards
}

.popup-static-in>.str-dialog-mask {
    animation: ease opacityOut 120ms forwards
} */

.str-dialog-message {
    overflow: auto;
    max-height: 50vh;
}

.max-height-250 {
    max-height: 250px;
}

.str-page-container {
    background: var(--theme-dialog-color);
    position: absolute;
    z-index: 24;
    box-shadow: var(--hb-24-shadow);
    max-height: 100vh;
    overflow: auto;
    box-sizing: border-box;
    border-radius: 4px;
}

.pagedialog {
    --startstatus: scale(0.5);
    --endstatus: scale(1.0);
}

.str-fulldialog-page-container {
    flex: 1;
    overflow: auto;
    background: var(--theme-dialog-color);
    -webkit-overflow-scrolling: touch;
    -webkit-overscroll-behavior: contain;
    overscroll-behavior: contain;
    padding: 16px;
}

.fulldialog {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 24;
    display: flex;
    flex-direction: column;
    background: white;
    padding-top: 56px;
    --startstatus: translateX(100%);
    --endstatus: translateX(0);
}
.fulldialog>[role="topbar"] {
    position: fixed;
    width: 100%;
}
.fulldialog::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    transform: translate(-100vw, 0);
}

.fulldialog.popup-static-out {
    animation: rightIn .28s ease-out forwards;
}

.fulldialog.popup-static-in {
    animation: rightOut .15s ease-in forwards;
}

.fulldialog.popup-static-out::before {
    animation: colorIn .28s ease-out forwards, leftIn .28s ease-out forwards;
}

.fulldialog.popup-static-in::before {
    animation: colorOut .28s ease-out forwards, leftOut .15s ease-in forwards;
}

@keyframes colorIn {
    0% {
        background: rgba(0, 0, 0, 0);
    }

    100% {
        background: rgba(0, 0, 0, 0.3);
    }
}

@keyframes colorOut {
    0% {
        background: rgba(0, 0, 0, 0.3);
    }

    100% {
        background: rgba(0, 0, 0, 0);
    }
}

@keyframes rightIn {
    0% {
        transform: var(--startstatus);
    }

    100% {
        transform: var(--endstatus);
    }
}

@keyframes rightOut {
    0% {
        transform: var(--endstatus);
    }

    100% {
        transform: var(--startstatus);
    }
}
.page-container>div {
    display: none;
}
.page-container>.popup-change,
.page-container>.popup-change,
.page-container>.app-change,
.page-container>.app-back {
    box-sizing: border-box;
    z-index: 1;
    width: 100%;
    display: block;
}

.app-back {
    position: absolute;
    transform: translate(100%, 0);
    top: 0;
    left: 0;
}

.change-state {
    overflow: hidden;
}

.page-in {
    animation: page-in .15s forwards ease-in-out;
}

.page-in-reverse {
    animation: page-in-reverse .15s forwards ease-in-out;
}

.page-out {
    animation: page-out .15s forwards ease-in-out;
}

.page-out-reverse {
    animation: page-out-reverse .15s forwards ease-in-out;
}

body>.page-container {
    position: relative;
}

@keyframes page-in {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes page-in-reverse {
    to {
        transform: translateX(100%);
    }
}

@keyframes page-out {
    to {
        transform: translateX(-100%);
    }
}

@keyframes page-out-reverse {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

.str-loader.popup-static-out {
    animation: ease transparentToOpacity 180ms forwards
}
.str-loader > .str-dialog-mask {
    background: transparent;
}

.str-loader.popup-static-in {
    animation: ease opacityToTransparent 120ms forwards
}

.str-loader {
    position: fixed;
    z-index: 24;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.str-loader>.page-container {
    width: 220px;
    text-align: center;
    background: rgba(0, 0, 0, .75);
    border-radius: 4px;
    padding: 16px 8px;
    box-shadow: var(--hb-24-shadow);
    line-height: 2;
    pointer-events: auto;
    box-sizing: border-box;
}

.str-loader.popup-static-out>.page-container {
    animation: toastIn 220ms ease-out forwards;
}

.str-loader.popup-static-in>.page-container {
    animation: toastOut 180ms ease-in forwards;
}

.str-loader .icon-container {
    margin-bottom: .5rem;
    height: 60px;
}

.str-loader [role="icon"].loader-icon {
    background-color: var(--theme-color);
    height: 48px;
    border-radius: 48px;
    color: rgba(0, 0, 0, .7);
    margin: 0;
}

.str-form-item {
    height: 56px;
    text-align: left;
    padding: 8px;
    background: white;
    margin-bottom: 8px;
}

.str-form-item>label:first-child {
    display: block;
    margin-bottom: 8px;
}

.str-form-item>[type="checkbox"],
.str-form-item>[type="radio"],
.str-form-item>[type="switchbox"] {
    margin-right: 8px;
}

.checkform[role="form"] input:invalid:not([role="formitem"] input:invalid),
.checkform[role="form"] input:invalid:-webkit-autofill:not([role="formitem"] input:invalid:-webkit-autofill),
.checkform[role="form"] textarea:invalid:-webkit-autofill:not([role="formitem"] textarea:invalid:-webkit-autofill),
.checkform[role="form"] select:invalid:-webkit-autofill:not([role="formitem"] select:invalid:-webkit-autofill) {
    -webkit-text-fill-color: red;
}
.checkform[role="form"] [role="formitem"]-filled>input:invalid,
.checkform[role="form"] [role="formitem"]-filled>select:invalid,
.checkform[role="form"] [role="formitem"]-filled>textarea:invalid {
    border-bottom: 2px solid var(--error-color);
}
.checkform[role="form"] [role="formitem"]-outline >input:invalid,
.checkform[role="form"] [role="formitem"]-outline >select:invalid,
.checkform[role="form"] [role="formitem"]-outline >textarea:invalid {
    border: 2px solid var(--error-color);
}
[role="img"] {
    display: inline-block;
}
.str-img-container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    justify-content: space-between;
    color: white;
    overflow: hidden;
}
.str-img-container > .str-img-viewer {
    flex: 1;
    display: inline-flex;
    flex-flow: row nowrap;
}
.str-img-container > .str-img-viewer {
    transition: transform .22s ease-in-out;
    transform: translateX(0);
}
.str-img-container > .str-img-viewer > .img-content {
    flex: 0 0 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    line-height: 3;
}
.str-img-container > .str-img-viewer > .img-content > img {
    object-fit: contain;
    align-self: center;
    flex: 1;
    width: calc(100vw - 32px);
}
.str-img-container > .str-img-index-count {
    text-align: center;
    letter-spacing: 2px;
}
.str-img-container > .str-img-index-count [role="icon"] {
    color: white;
    height: 24px;
    border-radius: 50%;
    padding: 16px;
}
.str-img-index-count.noPrevious > [role="icon"]:first-child,
.str-img-index-count.noNext > [role="icon"]:last-child {
    color: rgba(255, 255, 255, .5)
}
[role="table"] {
    border-spacing: 0;
    border-collapse: collapse;
    background: white;
    border: 1px solid rgba(0, 0, 0, .12);
}
[role="table"] caption {
    padding: 12px;
}
[role="table"] tbody > tr:hover {
    background: #eee;
}
[role="table"] td, [role="table"] th {
    box-sizing: border-box;
    padding: 12px 28px;
    position: relative;
}
[role="table"] [role="icon"] {
    height: 16px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 6px;
    border-radius: 50%;
    color: var(--theme-color);
}
[role="table"] td [role="formitemcontainer"] {
    min-width: auto;
}
.ripple {
    cursor: pointer;
}
.str-pc-date-picker-container {
    position: fixed;
    z-index: 24;
    background: white;
    box-shadow: var(--hb-24-shadow);
    border-radius: 4px;
    overflow: hidden;
}
.str-pc-date-picker {
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 284px;
    -webkit-user-select: none;
    user-select: none;
}
.str-pc-date-picker > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
}
.str-pc-date-picker > header > [role="icon"] {
    height: 20px;
    padding: 12px;
    border-radius: 50%;
    margin-left: -4px;
    display: none;
}
.str-pc-date-picker > header[data-mode="selectDay"] > [role="icon"] {
    display: block;
}
.str-pc-date-picker > header > [role="icon"]:last-child {
    margin-right: -4px;
}
.str-pc-date-picker > header > span {
    flex: 1 0 auto;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
}
.str-pc-date-picker > header[data-mode="selectYear"] > .year-month,
.str-pc-date-picker > header[data-mode="selectTime"] > .hour-minute {
    color: var(--theme-color);
}
.str-pc-date-picker > header > span:hover {
    color: var(--theme-color);
}
.str-pc-date-picker .date-week-container {
    line-height: 36px;
    width: 252px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.str-pc-date-picker .date-week-container li {
    text-align: center;
    width: 36px;
    color: var( --theme-disabled-text-color);
    line-height: 36px;
}
.str-pc-date-picker .pc-month-container,
.str-pc-date-picker .previous-pc-month-container,
.str-pc-date-picker .next-pc-month-container {
    position: relative;
    overflow: hidden;
    width: 252px;
    height: 216px;
}
.str-pc-date-picker .pc-month-container ul,
.str-pc-date-picker .previous-pc-month-container ul,
.str-pc-date-picker .next-pc-month-container ul,
.pc-year-container ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-flow: row wrap;
}
.str-pc-date-picker .pc-month-container ul,
.str-pc-date-picker .previous-pc-month-container ul,
.str-pc-date-picker .next-pc-month-container ul {
    height: auto;
    width: 252px;
    background: white;
}
.str-pc-date-picker .pc-month-container ul li,
.str-pc-date-picker .previous-pc-month-container ul li,
.str-pc-date-picker .next-pc-month-container ul li {
    width: 36px;
    display: block;
    text-align: center;
    line-height: 36px;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}
.str-pc-date-picker .pc-month-container ul li.current::before,
.str-pc-date-picker .previous-pc-month-container ul li.current::before,
.str-pc-date-picker .next-pc-month-container ul li.current::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    top: 2px;
    left: 2px;
    display: block;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid var(--theme-color);
}
.str-pc-date-picker footer {
    display: flex;
    justify-content: flex-end;
}
.str-pc-date-picker .pc-month-container ul li.li-item,
.str-pc-date-picker .previous-pc-month-container ul li.li-item,
.str-pc-date-picker .next-pc-month-container ul li.li-item {
    cursor: pointer;
}
.str-pc-date-picker .pc-month-container ul li.li-item.selected,
.str-pc-date-picker .previous-pc-month-container ul li.li-item.selected,
.str-pc-date-picker .next-pc-month-container ul li.li-item.selected {
    background: var(--theme-color);
    color: white;
    border-radius: 50%;
    clip-path: circle(16px);
}
.pc-year-container {
    height: 252px;
    overflow: auto;
}
.pc-year-container ul > li {
    flex: 0 0 33.3333333%;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.pc-year-container ul > li.current {
    background: var(--theme-color);
    color: white;
    border-radius: 18px;
}
li.disabled-item {
    color: var(--theme-disabled-text-color);
}
.select-timer-container {
    height: 252px;
    width: 252px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    padding: 0 64px;
    position: relative;
    background-image: linear-gradient(to bottom, transparent 0, transparent 112px, var(--theme-color) 0, var(--theme-color) 113px, transparent 0, transparent 140px, var(--theme-color) 0, var(--theme-color) 141px, transparent 0, transparent);
}
.select-timer-container::before {
    content: ":";
    line-height: 30px;
    color: var(--theme-color);
    font-weight: bold;
    width: 30px;
    text-align: center;
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    position: absolute;
    height: 30px;
}
.select-timer-container [role="icon"] {
    height: 20px;
    padding: 4px;
    border-radius: 50%;
}
.select-timer-container ul  {
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform .1s ease-out;
}
.select-timer-container > div {
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.select-timer-container ul > li {
    text-align: center;
    line-height: 28px;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    /* transition: all .1s .1s ease-out; */
}
.timer-area-container {
    height: 210px;
    overflow: hidden;
}
.select-timer-container ul > li.selected {
    color: var(--theme-color);
    font-weight: bold;
}
.str-pc-date-range-picker-container > .str-pc-date-picker {
    width: 552px;
    background: white;
}
.select-header {
    width: 252px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.select-header [role="icon"] {
    margin-left: -4px;
    height: 20px;
    padding: 12px;
    border-radius: 50%;
}
.select-header [role="icon"]:last-child {
    margin-right: -4px;
}
.str-pc-date-range-picker-container .popup-change {
    display: flex;
    justify-content: space-between;
}
.str-pc-date-range-picker-container {
    z-index: 24;
    position: fixed;
    box-shadow: var(--hb-24-shadow);
    border-radius: 4px;
    overflow: hidden;
}
.str-pc-date-picker .select-header span:hover {
    cursor: pointer;
    color: var(--theme-color);
}
[data-mode="selectTime"] .select-header [role="icon"] {
    display: none;
}
.select-header span {
    flex: 1 0 auto;
    line-height: 44px;
    text-align: center;
}
[data-mode="selectTime"] > header .hour-minute {
    color: var(--theme-color);
}
[data-mode="selectYear"] > header .year-month {
    color: var(--theme-color);
}
.loadinghidden {
    display: none;
}
[role="pagination"] {
    display: flex;
    justify-content: flex-end;
    height: 44px;
    align-items: center;
}
.str-pagination-size select {
    margin-left: 8px;
    height: 32px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid var(--theme-secondary-text-color);
}
.str-pagination-size, .str-pagination-range  {
    margin-right: 24px;
}
.str-btn-group [role="icon"] {
    height: 24px;
    padding: 6px;
    border-radius: 18px;
}
.tr-no-data {
    text-align: center!important;
}
.area-select-dialog {
    position: fixed;
    z-index: 24;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

header.area-select-header {
    margin-top: auto;
    background: var(--theme-dialog-color);
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--theme-decoration-color);
    padding: .3rem;
}

.area-container {
    display: flex;
    text-align: center;
    background: var(--theme-dialog-color);
    height: 220px;
    overflow: hidden;
    position: relative;
    overscroll-behavior: none;
    touch-action: none;
}

.area-container::after,
.area-container::before {
    content: "";
    width: 100%;
    height: 88px;
    background: var(--theme-color);
    position: absolute;
    top: 132px;
    left: 0;
    pointer-events: none;
    background: linear-gradient(to right, var(--theme-color), var(--theme-color)) top left / 100% 1px no-repeat, linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .1));
}

.area-container::before {
    top: 0px;
    background: linear-gradient(to right, var(--theme-color), var(--theme-color)) bottom left / 100% 1px no-repeat, linear-gradient(to top, transparent 0, rgba(0, 0, 0, .1));
}

.area-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1 1 10px;
    transition: all .25s ease-out;
}

.area-container ul li {
    height: 44px;
    line-height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.area-select-mask {
    background: rgba(0, 0, 0, .3);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.area-select-dialog.popup-static-out {
    animation: transparentToOpacity 180ms forwards ease-out;
}

.area-select-dialog.popup-static-in {
    animation: opacityToTransparent 120ms forwards ease-in;
}

.area-select-dialog.popup-static-out .area-select-mask {
    animation: colorIn .18s ease-out forwards;
}

.area-select-dialog.popup-static-in .area-select-mask {
    animation: colorOut .12s ease-in forwards;
}

.area-select-dialog.popup-static-in header,
.area-select-dialog.popup-static-in main {
    animation: topToBottom269 .12s ease-in forwards;
}

.area-select-dialog.popup-static-out header,
.area-select-dialog.popup-static-out main {
    animation: bottomToTop269 .18s ease-out forwards;
}

@keyframes bottomToTop269 {
    from {
        transform: translateY(269px);
    }

    to {
        transform: translateY(0px);
    }
}

@keyframes topToBottom269 {
    form {
        transform: translateY(0px);
    }

    to {
        transform: translateY(269px);
    }
}
.area-select-container-pos {
    position: fixed;
    background: white;
    z-index: 24;
    border-radius: 4px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, .25);
}
.area-select-detail-container {
    display: flex;
    padding: 4px;
}
.area-select-detail-container ul {
    list-style: none;
    margin: 0;
    text-align: center;
    line-height: 28px;
    max-height: 140px;
    overflow: auto;
    user-select: none;
    cursor: pointer;
    flex: 1 1 auto;
    overscroll-behavior-y: contain;
    padding: 0 16px;
}
.pc-area-select-footer {
    padding: 8px 16px;
    display: flex;
    justify-content: flex-end;  
}
.pc-area-select-footer > [role="btn"]:last-child {
    margin-right: -8px;
}
[data-tip]::before {
    position: absolute;
    padding: .5rem 1rem;
    border-radius: 4px;
    background: black;
    color: white;
    left: 50%;
    top: -8px;
    transform: translate(-50%,-100%);
    z-index: 1;
}
[data-tip]:hover::before {
    content: attr(data-tip);
}
[data-tip]:hover::after {
    content: "";
    width: 8px;
    height: 8px;
    background: black;
    border-radius: 2px;
    position: absolute;
    left: calc(50% - 4px);
    transform: rotate(45deg);
    top: -13px;
}
.str-tip-left[data-tip]::before {
    left: -8px;
    top: 50%;
    transform: translate(-100%, -50%);
}
.str-tip-left[data-tip]::after {
    left: -13px;
    top: calc(50% - 4px);
}
.str-tip-right[data-tip]::before {
    right: -8px;
    top: 50%;
    transform: translate(100%, -50%);
    left: auto;
}
.str-tip-right[data-tip]::after {
    left: auto;
    top: calc(50% - 4px);
    right: -13px;
}
.str-tip-bottom[data-tip]::before {
    left: 50%;
    bottom: -8px;
    transform: translate(-50%, 100%);
    top: auto;
}
.str-tip-bottom[data-tip]::after {
    bottom: -13px;
    top: auto;
}